border-radius是一种CSS属性,用于设置元素的边框的圆角程度。其具体的用法如下:
- 设置一个值:可以为元素设置一个单一的圆角半径,这个半径将应用于元素的四个角。例如:
div {
border-radius: 10px;
}
- 设置四个值:可以为元素的四个角分别设置不同的圆角半径。例如:
div {
border-radius: 10px 20px 30px 40px;
}
上述顺序是顺时针方向,即首先设置左上角的圆角,然后是右上角的,接着是右下角的,最后是左下角的。
3. 省略部分值:如果只提供部分值,那么剩余的角将会使用默认值(0)。值的分配顺序是先左后右,先上后下。例如:
div {
border-radius: 10px 20px 30px; /* 左下角的圆角半径是默认值0 */
}
div {
border-radius: 10px 20px; /* 左上角和右下角的圆角半径是默认值0 */
}
以上就是border-radius的基本用法,通过灵活运用这个属性,可以创建出各种具有圆角效果的元素。
@漏刻有时