主页 / 建站知识 /

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

建站知识 2021-07-03 08:15www.168986.cn长沙网站建设

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

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

或者

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

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

在网上搜索很少有人提到，有提到的好像也没实际解决，狼蚁网站SEO优化介绍个非常简单的方法，就是给有颜色的那个border宽度多加一个像素

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

是不是很滑....

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

原文

上一篇：纯html+css制作三级下拉菜单 下一篇：纯CSS实现垂直居中的9种方法

长沙网站设计

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by