完美的纯CSS圆角
记得以前还在学校以及刚出来工作的时候，WEB1.0风格的网站别说圆角了，就连图片都是一大版一大版的。后来渐渐改进了些，切一个小角当背景图来做圆角，不管怎么说，只要用到图片的话，怎么说都浪费掉了一个IIS链接数（关于这个以后讲解），而用纯CSS来做圆角，不仅效果不比图片差，而且代码也并不复杂。
关于用CSS画圆角的原理，我们先把一个圆角给放大了来看，就很简单明了了。
这是一个5像素的圆角，我们可以看到每个像素只是水平边距不同，那么我们的样式可以这样写：
1 2 3 4 5 6 7 8 | <style> div {height:100px; border-right:1px solid #000; border-left:1px solid #000;} b {display:block; overflow:hidden; height:1px;} .b1 {background:#000; margin:0 5px;} .b2 {border-right:2px solid #000; border-left:2px solid #000; margin:0 3px;} .b3 {border-right:1px solid #000; border-left:1px solid #000; margin:0 2px;} .b4 {border-right:1px solid #000; border-left:1px solid #000; margin:0 1px;} </style> |
这是用b标签来当做圆角的转角，当然，理解了原理之后，可以延伸出多种的圆角。
在html页面里这样写就可以了：
1 2 3 | <b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b> <div></div> <b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b> |
2条留言 立即发表评论
把代码搞复杂了，得不偿失
的确是多出了一些无语义的标签。其实实际项目中用图片的居多，这里只是讨论下不用图片的方法了。