使用css3画"静音"icon

使用css3画"静音"icon

先看看画出来的效果：注意没有使用图片，而是在支持css3的浏览器(Firefox 3.5+, Chrome 5, and Opera 10.6)中的纯css画出来的icon效果截图，而且html代码也非常简单。仔细观察静音的这个icon,由4部分构成，一个圆圈，一个斜线，一个正方形，一个三角形。圆圈可以使用css3里面的圆角实现。斜线可以是一个元素的边框，然后经过转45度得到。正方形就不用说了。三角形可以使用边框来实现。如果给每个元素一个标签，可想html结构是比较复杂，幸好可以使用:before :after伪元素来实现。代码:
<style type="text/css">.mute{font: 50px/1.4 "Microsoft YaHei";position:relative;z-index:1;overflow:hidden; padding-left:50px;}.mute a{text-decoration:none; color:#444; font-weight:bold;}/*将4个元素的坐标原点成容器的左中*/.mute:before, .mute:after, .mute a:before, .mute a:after { content: ""; position: absolute; top: 50%; left: 0;}/*.mute前面的伪元素实现圆圈*/.mute:before{ width: 40px; height: 40px; border: 1px solid #C55500; margin-top: -19px; -webkit-border-radius: 40px;/*圆角半径为元素宽度，这样，每一个圆角成为1/4圆*/ -moz-border-radius: 40px; border-radius: 40px;}/*.mute后面的伪元素实现斜线，边框旋转45度得到*/.mute:after { width: 40px; border-top: 1px solid #C55500; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg);}/*a的前面伪元素实现三角形*/.mute a:before { left: -3px; border: 17px solid transparent; border-right-color: #C55500; margin-top: -16px; background: transparent;}/*a后面的伪元素画一个正方形放在合适的位置*/.mute a:after { height: 16px; left: 8px; margin-top: -8px; width: 16px; background-color:#C55500;}</style><!-- html就这么简单 --><span class="mute"><a href="###">Mute</a></span>使用css3实现的icon的最大优点在于可以自由的改变icon的颜色，而不是做很多图片，icon更像是用画笔画出来的，可控性强，易于修改和扩展。参考资料：更多的css icon3 demo: http://nicolasgallagher.com/pure-css-gui-icons/demo原作者博文：http://nicolasgallagher.com/pure-css-gui-icons/更多使用伪元素实现的特效：http://www.haipi8.com/css/347css border的妙用：http://www.classyuan.com/?p=252