标签：style blog http color 使用 os io strong
有一些需要用到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; }
CSS画基本图形（圆形、三角形、多边形、爱心、八卦等）,布布扣,bubuko.com
CSS3边框属性_圆角、CSS画基本图形（圆形、三角形、多边形、爱心、八卦等）
标签：style blog http color 使用 os io strong
原文地址：http://www.cnblogs.com/LO-ME/p/3665334.html
