源码网,源码论坛,源码之家,商业源码,游戏源码下载,discuz插件,棋牌源码下载,精品源码论坛

 找回密码
 立即注册
楼主: ttx9n

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

[复制链接]

7万

主题

861

回帖

32万

积分

论坛元老

Rank: 8Rank: 8

积分
329525
发表于 2016-3-9 15:09:47 | 显示全部楼层 |阅读模式
这篇文章主要帮助大家解决纯css写三角形在firefox下的锯齿问题,css如何实现小三角箭头,文章为大家列出了常用方法,感兴趣的小伙伴们可以参考一下

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

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

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

是不是很滑....

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

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

回复

使用道具 举报

7

主题

2万

回帖

288

积分

中级会员

Rank: 3Rank: 3

积分
288
发表于 2022-8-8 21:56:36 | 显示全部楼层
刷刷刷刷刷刷刷刷刷刷刷刷刷刷刷
回复 支持 反对

使用道具 举报

0

主题

2万

回帖

55

积分

注册会员

Rank: 2

积分
55
发表于 2022-9-19 04:30:18 | 显示全部楼层
额UI废物iuhfujewfiewnnfen
回复 支持 反对

使用道具 举报

2

主题

2万

回帖

499

积分

中级会员

Rank: 3Rank: 3

积分
499
发表于 2022-12-12 10:57:22 | 显示全部楼层
撒房产税陈飞飞
回复 支持 反对

使用道具 举报

0

主题

1万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2023-9-2 08:54:13 | 显示全部楼层
来看看怎么样
回复 支持 反对

使用道具 举报

29

主题

2万

回帖

194

积分

注册会员

Rank: 2

积分
194
发表于 2023-10-15 19:37:58 | 显示全部楼层
来看看!!!
回复 支持 反对

使用道具 举报

0

主题

1万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2023-10-17 00:07:31 | 显示全部楼层
哦哦哦哦哦哦哦哦哦
回复 支持 反对

使用道具 举报

0

主题

2万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2023-11-19 17:03:42 | 显示全部楼层
女生看了弄丢了卡萨诺的卡洛斯
回复 支持 反对

使用道具 举报

6

主题

2万

回帖

425

积分

中级会员

Rank: 3Rank: 3

积分
425
发表于 2024-6-18 02:47:29 | 显示全部楼层
为全额万千瓦
回复 支持 反对

使用道具 举报

1

主题

2万

回帖

55

积分

注册会员

Rank: 2

积分
55
发表于 2024-9-2 13:01:18 | 显示全部楼层
呵呵呵呵呵呵呵a
回复 支持 反对

使用道具 举报

高级模式
B Color Image Link Quote Code Smilies

本版积分规则

手机版|小黑屋|网站地图|源码论坛 ( 海外版 )

GMT+8, 2024-11-28 18:32 , Processed in 0.082298 second(s), 25 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表