利用CSS3实现常见几何图形一.docxVIP

利用 CSS 实现基本几何图形 利用 CSS3.0 中的边框、背景相关属性，可以实现长方形、正方形、平行四边形、圆形等基本几何图形。 1、 长方形:设置长和宽、背景.长就是通过 width 属性设置,宽通过 height 属性设置. #rectangle { width:200px; height:50px; background-color:#4F87C2; text-align:center; } 2、 正方形:同长方形(宽和长相同) 3、 平行四边行:设置长和宽、倾斜角度 #parallelogram { width:200px; height:50px; margin-left:30px; -webkit-transform: rotate(-30deg); /* for Chrome || Safari */ -moz-transform: rotate(200deg); /* for Firefox */ -ms-transform: rotate(30deg); /* for IE */ -o-transform: rotate(200deg); /* for Opera */ background-color:#4F87C2; } 其中 –transform 是 css3.0 标准里规定的，目前浏览器支持情况：Safari 3.1、+ Chrome 8+ 、Firefox 4、+ Opera 10+ 、IE9+ 4、 圆形: 设置长和宽、半径 #circle { width:200px; height:50px; background-color:#4F87C2; border-radius:150px; } 其中 –border-radius是 css3.0 标准里规定的，目前浏览器支持情况： Firefox4.0+、Safari5.0+、Google Chrome 10.0+、Opera 10.5+、IE9+ 5、 效果如下图 更多优质干货，请访问南京宝云教育官网