头闻号

东莞市胜泰电子有限公司

综合性公司|点胶设备|树脂型胶粘剂|复合型胶粘剂|合成胶粘剂|其他工业润滑油

首页 > 新闻中心 > 科技常识:解决纯css写三角形在firefox下的锯齿问题
科技常识:解决纯css写三角形在firefox下的锯齿问题
发布时间:2023-02-01 10:35:08        浏览次数:7        返回列表

今天小编跟大家讲解下有关解决纯css写三角形在firefox下的锯齿问题 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关解决纯css写三角形在firefox下的锯齿问题 的相关资料,希望小伙伴们看了有所帮助。

相信很多人都用过利用border来实现小三角箭头,百度一下,这类的文章多如牛毛,这里我还是碌惆殉S玫姆椒ǔ铝谐隼矗

CSS Code复制内容到剪贴板 .triangle_border_up{ width:0; height:0; border-width:030px30px; border-style:solid; border-color:transparenttransparent#333; margin:40pxauto; position:relative; }

或者:

CSS Code复制内容到剪贴板 .border_bottom{ width:0; height:0; border:10pxsolidtransparent; border-bottom:11pxsolid#000; }

这样写都有个问题,就是在firefox里面会有锯齿,看着就不爽,如下左图,这是放大后的,三角越小锯齿越明显,其他浏览器很润滑,下面的右图。

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

CSS Code复制内容到剪贴板 .border_bottom{ width:0; height:0; border:50pxsolidtransparent; border-bottom:51pxsolid#000; }

是不是很滑....

以上就是为大家分享的文章,希望对大家的学习有所帮助。

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

来源:爱蒂网