码迷,mamicode.com
首页 > Web开发 > 详细

关于纯css写三角形在firefox下的锯齿问题

时间:2014-12-17 14:24:56      阅读:147      评论:0      收藏:0      [点我收藏+]

标签: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里面会有锯齿,看着就不爽,如下左图,这是放大后的,三角越小锯齿越明显,其他浏览器很润滑,下面的右图。

bubuko.com,布布扣bubuko.com,布布扣

在网上搜索很少有人提到,有提到的好像也没实际解决,下面介绍个非常简单的方法,就是给有颜色的那个border宽度多加一个像素:

.border_bottom{
                width:0;
                height:0;
                border:50px solid transparent;
                border-bottom: 51px solid #000;
            }

bubuko.com,布布扣

是不是很滑....

 

关于纯css写三角形在firefox下的锯齿问题

标签:style   blog   ar   io   color   os   sp   on   div   

原文地址:http://www.cnblogs.com/hutuzhu/p/4169252.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!