如何解决纯css写三角形在firefox下的锯齿问题
这篇文章主要介绍“如何解决纯css写三角形在firefox下的锯齿问题”,在日常操作中,相信很多人在如何解决纯css写三角形在firefox下的锯齿问题问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”如何解决纯css写三角形在firefox下的锯齿问题”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!
创新互联专注于仓山网站建设服务及定制,我们拥有丰富的企业做网站经验。 热诚为您提供仓山营销型网站建设,仓山网站制作、仓山网页设计、仓山网站官网定制、成都小程序开发服务,打造仓山网络公司原创品牌,更为您提供仓山网站排名全网营销落地服务。
相信很多人都用过利用border来实现小三角箭头,百度一下,这类的文章多如牛毛,这里我还是啰嗦点把常用的方法陈列出来:
CSS Code复制内容到剪贴板
.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;
}
或者:
CSS Code复制内容到剪贴板
.border_bottom{
width:0;
height:0;
border:10px solid transparent;
border-bottom: 11px solid #000;
}
这样写都有个问题,就是在firefox里面会有锯齿,看着就不爽,如下左图,这是放大后的,三角越小锯齿越明显,其他浏览器很润滑,下面的右图。
在网上搜索很少有人提到,有提到的好像也没实际解决,下面介绍个非常简单的方法,就是给有颜色的那个border宽度多加一个像素:
CSS Code复制内容到剪贴板
.border_bottom{
width:0;
height:0;
border:50px solid transparent;
border-bottom: 51px solid #000;
}
是不是很滑....
到此,关于“如何解决纯css写三角形在firefox下的锯齿问题”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注创新互联网站,小编会继续努力为大家带来更多实用的文章!
文章题目:如何解决纯css写三角形在firefox下的锯齿问题
当前路径:http://scyanting.com/article/jdicoc.html