关于纯css写三角形在firefox下的锯齿问题
相信很多人都用过利用border来实现小三角箭头,百度一下,这类的文章多如牛毛,这里我还是啰嗦点把常用的方法陈列出来:
.triangle_border_up{
width:;
height:;
border-width:0 30px 30px;
border-style:solid;
border-color:transparent transparent #333;/*透明 透明 灰*/
margin:40px auto;
position:relative;
}
或者:
.border_bottom{
width:;
height:;
border:10px solid transparent;
border-bottom: 11px solid #000;
}
这样写都有个问题,就是在firefox里面会有锯齿,看着就不爽,如下左图,这是放大后的,三角越小锯齿越明显,其他浏览器很润滑,下面的右图。
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAABCCAIAAAAT54VOAAABjUlEQVR4nO3S0Q7CMAxD0f7/T48XEAJNy2gd2ym576uco42jozTUA/6lhibV0KQamlRDk2poUu7Q45V6yGrWB4zP1HOW8l0/zlKPms90+qlyaWvH3RfKda3tRofKRa29Ft9UrmhtNPcn5XLWLlsnlGtZWwydVi5krV+5qFzFWjwRolzCWrkPqOxvLRsHVza31ixLUna2FsxKVba1Zm8iKHtaUwfRlA2teWvIym7WpCkSZStrxg6hso91+gg18rPsM2OH3NedSr00pkh82q+8Y2ONrHctSzr2FkjKo95lnByb4F+sEPzqmAX8XJ2wh8cyyLeqBbw9xoE9VDPU+bEP5pXKQQRiIsAT9VtHiJVWv98liOYV1NLHe4UyPbea/3LHgLLfXJOf7RvW9y02883uwZWPCWg1AikxtPp8ajJo9eGCBNDqk2VRodXHiiNBq8+0KB1afaBRidDq0+xKgVYfZRoYWn2OdTBo9SEFAkCrTygT4I/uMmpoUg1NqqFJNTSphibV0KQamlRDk2poUg/bQE4oq4q+9wAAAABJRU5ErkJggg==" alt="" />aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHkAAABACAIAAACx7U97AAABn0lEQVR4nO3b243EMAxDUZecEtxBSt79EDCDDbJ52BJFyboVEOef7adC1bwHLFRZ4yprXGWNq6xxUVtv27bvu/cKtXite++ttdZa7917i06k1h/oTNyM1gfoNNx01qfQObi5rC+gE3ATWd9CR+dmsX4IHZqbwvoVdFxuf+sB6KDcztbD0BG5Pa0nocNxu1mrQMfi9rFWhA7E7WCtDh2FG21tBB2CG2ptCs3PjbMGQJNzg6xh0MzcCGswNC23ubULNCe3rbUjNCG3obU7tMTDbWVNAi2RcJtYU0FLDNz61oTQkju3sjUttOTLrWlNDi05cqtZh4CWvLh1rANBSy7cCtbhoCU896x1UGgJzD1lHRpaQnKPWyeAlmDcg9ZpoCUM94h1MmgJwP3aOiW0ZM39zjoxtGTK/cI6PbRkx/3UehFoyYj7kfVS0JIF9731gtCSOveN9bLQki73lfXi0JIi97/WBf1Ji/vcuqAPqXCfWBf0afPcR+uCvmiS+491Qd82w/21LuiHDXP7f0nXqaxxlTWussZV1rjKGldZ4yprXL9d1Tqz8lf0YQAAAABJRU5ErkJggg==" alt="" />
在网上搜索很少有人提到,有提到的好像也没实际解决,下面介绍个非常简单的方法,就是给有颜色的那个border宽度多加一个像素:
.border_bottom{
width:;
height:;
border:50px solid transparent;
border-bottom: 51px solid #000;
}
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHQAAABICAIAAACoQEamAAABmElEQVR4nO3SQQ4CMQxD0dz/0rCYLJAQaKaNY6fy39NxnoiXgxXsASdnXGDGBWZcYMYFZlxgxgVmXGDGBWZcYGNwIyJizNqrGXPjI/aWBw3YGl+xF91Nfei37CBf6ZW/ZKf46k78LzvCV3TfHVl9X8Vx92XFfeWWPZVV9tWatSYr6yu0aUdW01dl0L6soK/EmipZNV/+lFpZKV/yDoSsji9zBE5WxJe2AC2r4Mv5fI8s3Zfw7U5Zrm/3h/tlib6tX2XJsnz7PsmVvWo7Nk9u+oxMPffm1R3fEKvh5Dwc/gHJ0Ffn7djXhYMenucDn5YPd3sKoN4dEuj8RIA8OiqEQDrUvziwcoSkKH5ubLUOqVH51vAKKRKk7KEjqtJIk5pXDqoEJFkKnjiufZOU2f39ofFx2QLYmLjs2zvi4LKv7qsbl31vd3247Es5deCyb2SGxWVfxw+Fy75LpXpc9kVaVeKyb1GsBpd9hW67uOz96q3jspfPaAWXvXlSK/9ct59xgRkXmHGBGReYcYEZF5hxgRkXmHGBGRfYG4CvvfA4zvFrAAAAAElFTkSuQmCC" alt="" />
是不是很滑....
关于纯css写三角形在firefox下的锯齿问题的更多相关文章
- 纯CSS写三角形-border法
(1)有边框的三角形 我们来写下带边框的三角形. 如果是一个正方形,我们写边时,会用到border,但我们这里讨论的三角形本身就是border,不可能再给border添加border属性,所以我们需要 ...
- 利用纯css写三角形,弧度箭头,吃豆人,气泡。放大镜,标签的源码
1. 向上三角形
- 纯css 写三角形
<div style="width: 0;height: 0;border-left: 6px solid transparent;border-right: 6px solid tr ...
- 三种纯CSS实现三角形的方法
看到像上图这样的 tip 的小三角,你会怎么办? 切个图上去?恩,不错,简单,兼容性也一级棒,不但好控制,那点小东西也增加不了多少图片的大小.但有没有更好更讲究技巧的办法呢?哈哈,那必须有啊,而且还不 ...
- 纯 CSS 实现三角形尖角箭头的实例
上次无意中发现了个使用纯 CSS 实现三角形尖角箭头的方法 http://blog.csdn.net/zhouzme/article/details/18901943 ,但没有怎么用上,也没有详细完整 ...
- 纯css写带小三角对话框
在实际样式中经常会遇到要写类似对话框的样式,而这种样式往往会有一个小三角,如下所示: 那么如何用css写出来呢,其实很简单,先让父元素相对定位,然后运用css的伪类before或after.就可以写个 ...
- CSS 魔法系列:纯 CSS 绘制三角形(各种角度)
我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...
- CSS学习笔记(8)--纯CSS绘制三角形(各种角度)
纯CSS绘制三角形(各种角度) CSS三角形绘制方法,学会了这个,其它的也就简单. 我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多 ...
- 纯css画三角形
纯css画三角形与border元素相关 设置border的属性 width: 100px; height: 100px; border-style: solid; border-width: 100p ...
随机推荐
- Python自动发送HTML测试报告
在我们做自动化测试的时候,执行完所有的测试用例,我们是希望马上得到结果的,那么我们不可能一直盯着去看,这个时候就需要引入邮件功能 1.首先我们使用一个python的第三方发邮件的库 yagmail g ...
- Scrapy 抓取股票行情
安装scrapy会出现错误,我们选择anaconda3作为编译环境,搜索scrapy安装(有错误自查) 创建scrapy爬虫项目: 调出cmd,到相应目录:输入: scrapy startprojec ...
- Thread类和Runnable接口的比较
Thread和Runnable的联系 Thread类的定义: public class Thread extends Object implements Runnable 联系:从Thread类的定义 ...
- 大数据-hive安装
1.下载Hive需要的版本 我们选用的是hive-3.1.0 将下载下来的hive压缩文件放到/opt/workspace/下 2.解压hive-3.1.0.tar.gz文件 [root@master ...
- [转] java获取hostIp和hostName
[From] https://www.cnblogs.com/huluyisheng/p/6867370.html InetAddress的构造函数不是公开的(public),所以需要通过它提供的静态 ...
- 学习react心得及总结
注意学习这个在D盘:小红书第一部分的案例react/new-my-app 小红书第二部分的案例react/make-redux 小红书第三部分的案例react/my-app-higher 并且里面有说 ...
- JDBC(2)-使用statment接口实现增删改操作
1.Statement接口引入 作用:用于执行静态SQL语句并返回它所生成结果的对象. int executeUpdate(String sql) :执行给定SQL语句,该语句可能为insert.up ...
- java练习题:现给出二组字符串,比较他们看是否相等
import java.io.BufferedReader;import java.io.IOException;import java.io.InputStreamReader;import jav ...
- Object-c 中的数据类型
导航: 基本类型 ID 对象类型常见的有 对象类型 -NSLog -NSNumber -NSString和NSMutableString -NSArray和NSMutableArray -NSSe ...
- JAVA源码之JDK(二)——Integer、Long、Double
这篇文章继续java.lang包下的源码学习,笔者也是找了几个比较常用的来阅读.下面针对Integer.Long.Double这样的基本类型的封装类,记录一些比较经典.常用的方法的学习心得,如toSt ...