通过CSSborder-radius
属性,您可以指定任何元素"rounded corners"。
CSSborder-radius
属性定义元素角的半径。
提示:此属性允许您为元素添加圆角!
以下是三个例子:
1.指定背景颜色的元素的圆角:
圆角!
2. 带边框的元素的圆角:
圆角!
3. 带有背景图片的元素的圆角:
圆角!
这是代码:
#rcorners1 {
border-radius: 25px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners2 {
border-radius: 25px;
border: 2px solid #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners3 {
border-radius: 25px;
background: url(paper.gif);
background-position: left top;
background-repeat: repeat;
padding: 20px;
width: 200px;
height: 150px;
}
亲自试一试 »
提示:这个border-radius
属性实际上是属性的简写border-top-left-radius
,border-top-right-radius
,border-bottom-right-radius
和border-bottom-left-radius
特性。
这个border-radius
属性可以有一到四个值。规则如下:
四个值 - border-radius: 15px 50px 30px 5px;(第一个值适用于左上角,第二个值适用于右上角,第三个值适用于右下角,第四个值适用于左下角):
三个值 - border-radius: 15px 50px 30px;(第一个值适用于左上角,第二个值适用于右上角和左下角,第三个值适用于右下角):
两个值 - border-radius: 15px 50px;(第一个值适用于左上角和右下角,第二个值适用于右上角和左下角):
一个值 - border-radius: 15px;(该值适用于所有四个角,它们均等圆:
这是代码:
#rcorners1 {
border-radius: 15px 50px 30px 5px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners2 {
border-radius: 15px 50px 30px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners3 {
border-radius: 15px 50px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners4 {
border-radius: 15px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
亲自试一试 »
您还可以创建椭圆角:
#rcorners1 {
border-radius: 50px / 15px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners2 {
border-radius: 15px / 50px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
#rcorners3 {
border-radius: 50%;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
亲自试一试 »
Property | Description |
---|---|
border-radius | A shorthand property for setting all the four border-*-*-radius properties |
border-top-left-radius | Defines the shape of the border of the top-left corner |
border-top-right-radius | Defines the shape of the border of the top-right corner |
border-bottom-right-radius | Defines the shape of the border of the bottom-right corner |
border-bottom-left-radius | Defines the shape of the border of the bottom-left corner |
截取页面反馈部分,让我们更快修复内容!也可以直接跳过填写反馈内容!