关于纯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 ...
随机推荐
- 【转】C++ 类访问控制public/private/protected探讨
示例1:---------------------------------------- class C{ int c1; int c2;public: void set(C* s, int i, i ...
- [web]Servlet中的Listener和Filter
建议先看看 ——> Servlet工作原理 一.Listener 在Tomcat服务中,Listener的设计是基于观察者模式的,目前在Servlet中提供6中两类事件的观察者接口,它们分别是: ...
- html5兼容问题
1.html5对于ie9一下的版本不支持,所以我们可以添加(你可以下载至本地): <!--[if lt IE 9]> <script src="http://cdn.sta ...
- Windows搭建Go语言环境·
对于Windows用户,Go语言提供两种安装方式(源码安装除外): .MSI安装:程序会自动配置你的安装 .ZIP安装:需要你手动设置一些环境变量 一.MSI安装 1.下载安装包(根据操作系统选择相应 ...
- 《The One 团队》第二次作业:团队项目选题
项目 内容 作业所属课程 http://www.cnblogs.com/nwnu-daizh/ 作业要求 https://www.cnblogs.com/nwnu-daizh/p/10726884.h ...
- Kubeadm and Kops
Kubeadm是Kubernetes官方推出的快速部署Kubernetes的集群工具,其思路是将Kubernetes相关服务容器化以简化部署. With the release of kubeadm ...
- (转)python之os,sys模块详解
python之sys模块详解 原文:http://www.cnblogs.com/cherishry/p/5725184.html sys模块功能多,我们这里介绍一些比较实用的功能,相信你会喜欢的,和 ...
- Mongodb利用aggregation实现抽样查询(按记录数和时间)
之前对mongodb不熟,但是项目要用,因为数据量比较大,并且领导要实现抽样查询,控制数据流量,所以自己研究了下,亲测可用,分享一下! 话不多说,上代码: 第一种方案:加自增主键,实现按记录数抽样 1 ...
- IE的haslayout的触发
原文连接:http://www.cnblogs.com/yunxuange/archive/2012/09/19/2693886.html layout是Windows上的IE浏览器产生许多bug的根 ...
- hadoop命令详解
一.用户命令1.archive命令 (1).什么是Hadoop archives?Hadoop archives是特殊的档案格式.一个Hadoop archive对应一个文件系统目录. Hadoop ...