如何使用border-radius制作圆角效果?
border-radius是CSS属性之一,用于造做元素的圆角效果。通过该属性能够造做出圆形、卵形和不规则的圆角效果。
若何利用border-radius?border-radius属性值能够设置一个或多个半径值,用空格分隔,每个半径值别离对应元素的四个角,从左上角起头顺时针设置。若是只设置一个值,那么四个角的半径值都不异。若是设置两个值,第一个值对应左上角和右下角,第二个值对应右上角和左下角。若是设置三个值,依次对应左上角、右上角/左下角、右下角。若是设置四个值,则别离对应左上角、右上角、右下角、左下角。
示例代码```
div {
width: 100px;
height: 100px;
background-color: #f00;
border-radius: 50px;
}
若何造做差别外形的圆角效果?除了能够间接设置半径值外,还能够通过设置程度和垂曲标的目的的半径值来造做卵形和不规则的圆角效果。详细实现是在半径值前加上斜杠“/”,然后别离设置程度和垂曲标的目的的半径值即可。
width: 150px;
background-color: #0f0;
border-radius: 20px/50px;
border-radius的阅读器兼容性?border-radius属性在大大都现代阅读器中都得到了撑持,但是在一些老旧的阅读器或挪动设备上可能不撑持。为了包管网页的兼容性,能够通过加上阅读器前缀来实现。例如在webkit阅读器中加上-webkit前缀即可。