如何解决纯css写三角形在firefox下的锯齿问题

春天到了,各种绚丽的花朵都开放了,金黄的油菜花,成了蝴蝶的天地,美丽的蝴蝶在金黄色的舞台上跳着柔和而优美的舞姿。它们一会儿在空中飞舞,一会儿静静地停留在油菜花上。给春天增添了不少乐趣。油菜花的美丽,同时也吸引了不少 "劳动人民 "——蜜蜂,它们总是不分昼夜地不辞辛劳地给油菜花授粉。偶尔一阵微风吹来,金黄的油菜花立刻涌起了高低起伏的 "金浪花 "。远远望去,真是美不胜收!

相信很多人都用过利用border来实现小三角箭头,百度一下,这类的文章多如牛毛,这里我还是啰嗦点把常用的方法陈列出来:

CSS Code复制内容到剪贴板
  1. .triangle_border_up{
  2. width:0;
  3. height:0;
  4. border-width:030px30px;
  5. border-style:solid;
  6. border-color:transparenttransparent#333;/*透明透明灰*/
  7. margin:40pxauto;
  8. position:relative;
  9. }

或者:

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

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

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

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

是不是很滑....

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

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

您可能有感兴趣的文章
css让页脚保持在底部位置的四种方案

CSS如何使用Flex和Grid布局如何实现3D骰子

Flex布局史上最简单使用语法教程

新的CSS 伪类函数 :is() 和 :where()示例详解

纯CSS打字动画的如何实现示例