有一些需要用到CSS3的属性，所以在你打开这篇文章的时候，用的是firefox或者chrome，当然IE也能看一部分
1、正方形
div{
background:#F00;
width:100px;
height:100px;
}
2、长方形
div{
background:#F00;
width:200px;
height:100px;
}
3、圆形
div{
width: 100px;
height: 100px;
background: red;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
}
4、椭圆
div{
width: 200px;
height: 100px;
background: red;
-moz-border-radius: 100px / 50px;
-webkit-border-radius: 100px / 50px;
border-radius: 100px / 50px;
}
5、上三角
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;
}
CSS3边框属性_圆角、CSS画基本图形（圆形、三角形、多边形、爱心、八卦等）
时间： 2024-10-13 12:23:00