CSS圆角 border-radius属性详解:
CSS的border-radius
属性用于设置元素的圆角。它可以接受1到4个值,分别对应一个或多个圆角。
基本语法如下:
border-radius: 1-4 length | percentage;
其中,length
是一个长度值,比如像素(px)或em,percentage
是相对于元素的宽度或高度的百分比。
示例代码:
/* 所有圆角都是10像素 */
div {
border-radius: 10px;
}
/* 水平圆角为10像素,垂直圆角为5像素 */
div {
border-radius: 10px 5px;
}
/* 左上角和右下角是10像素,右上角和左下角是5像素 */
div {
border-radius: 10px 5px 15px 20px; /* 顺时针方向 */
}
/* 使用百分比 */
div {
border-radius: 50%;
}
border-radius
可以设置为一个值(正圆形)、两个值(横向和纵向圆角分别设置)、三个值(一个四边形)或四个值(独立设置每个角)。当设置为50%
时,会形成一个完美的圆形。
评论已关闭