标签:style blog ar io color os sp on div
相信很多人都用过利用border来实现小三角箭头,百度一下,这类的文章多如牛毛,这里我还是啰嗦点把常用的方法陈列出来:
.triangle_border_up{ width:0; height:0; border-width:0 30px 30px; border-style:solid; border-color:transparent transparent #333;/*透明 透明 灰*/ margin:40px auto; position:relative; }
或者:
.border_bottom{ width:0; height:0; border:10px solid transparent; border-bottom: 11px solid #000; }
这样写都有个问题,就是在firefox里面会有锯齿,看着就不爽,如下左图,这是放大后的,三角越小锯齿越明显,其他浏览器很润滑,下面的右图。
在网上搜索很少有人提到,有提到的好像也没实际解决,下面介绍个非常简单的方法,就是给有颜色的那个border宽度多加一个像素:
.border_bottom{ width:0; height:0; border:50px solid transparent; border-bottom: 51px solid #000; }
是不是很滑....
标签:style blog ar io color os sp on div
原文地址:http://www.cnblogs.com/hutuzhu/p/4169252.html