正文
CSS3_边框属性之圆角的基本图形案例
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
一、正方形
div{ background:#F00; width:100px; height:100px;}
二、长方形
div{background:#F00;width:200px;height:100px;}
三、圆形
把宽度（width）与高度(height)值设置为一致（也就是正方形），并且四个圆角值都设置为它们值的一半。
div{width: 100px;height: 100px;background: red;-moz-border-radius: 50px;-webkit-border-radius: 50px;border-radius: 50px;}
四、半圆
div{width:96px;height:48px;border-top:2px solid red;border-right:2px solid red;border-bottom:50px solid red;/*重点在这里*/border-left:2px solid red; border-radius:100px;}
五、椭圆
div{width: 200px;height: 100px;background: red;-moz-border-radius: 100px / 50px;-webkit-border-radius: 100px / 50px;border-radius: 100px / 50px;}
六、上三角
div{ width: 0;height: 0;border-left: 50px solid transparent;border-right: 50px solid transparent;border-bottom: 100px solid red;}
6、正方形
7、正方形
8、正方形
9、正方形
10、正方形
11、正方形
12、正方形
13、正方形
14、正方形
15、正方形
16、正方形
17、正方形
18、正方形
19、正方形
20、正方形
21、正方形
22、正方形
23、正方形
24、正方形
25、正方形
26、8角星
div {
background: red;
width: 80px;
height: 80px;
position: relative;
text-align: center;
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
-ms-transform: rotate(20deg);
-o-transform: rotate(20eg);
transform: rotate(20deg);
}
div:before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 80px;
width: 80px;
background: red;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-ms-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
27、钻石
div{
border-style: solid;
border-color: transparent transparent red transparent;
border-width: 0 25px 25px 25px;
height: 0;
width: 50px;
position: relative;
margin: 20px 0 50px 0;
}
div:after {
content: "";
position: absolute;
top: 25px;
left: -25px;
width: 0;
height: 0;
border-style: solid;
border-color: red transparent transparent transparent;
border-width: 70px 50px 0 50px;
}
28、阴阳八卦
div {
width: 96px;
height: 48px;
background: #eee;
border-color: #000;
border-style: solid;
border-width: 2px 2px 50px 2px;
border-radius: 100%;
position: relative;
}
div:before {
content: "";
position: absolute;
top: 50%;
left: 0;
background: #eee;
border: 18px solid #000;
border-radius: 100%;
width: 12px;
height: 12px;
}
div:after {
content: "";
position: absolute;
top: 50%;
left: 50%;
background: #000;
border: 18px solid #eee;
border-radius:100%;
width: 12px;
height: 12px;
}
