关于纯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 ...
随机推荐
- P4173 残缺的字符串
题目链接 题意分析 啥 ? ? ? \(FFT\)做字符串匹配 可是就是这样 我们定义匹配函数 我们定义\(A\)是匹配串 \(B\)是被匹配串 我们当前到达\(B\)串的\(x\)位置 \[P(x) ...
- JAVA JVM 杂谈(一)
JVM能够跨计算机体系结构来执行Java字节码,主要是由于JVM屏蔽了与各个计算机平台先关的软件或者硬件之间的差异,使得与平台先关的耦合统一由JVM的提供者来实现. JVM结构组成: 1.类加载器:在 ...
- 集合之四:List接口
查阅API,看List的介绍.有序的 collection(也称为序列).此接口的用户可以对列表中每个元素的插入位置进行精确地控制.用户可以根据元素的整数索引(在列表中的位置)访问元素,并搜索列表中的 ...
- C# 进程通信SendMessage和有关消息参数
SendMessage是啥? 函数原型: LRESULT SendMessage(HWND hWnd,UINT Msg,WPARAM wParam,LPARAM IParam)SendMessage( ...
- google浏览器安装不上的绝望经历
手贱把google的一些文件删除了,整个浏览器都没法打开 决定重装下,但是连卸载的功能都无法打开了 于是决定上网重新下载了个安装包,发现安装包都打不来 很绝望,查了很多资料 很多人说要删除注册表的东西 ...
- 在浏览器中输入URL后,执行的全部过程。(一次完整的http请求过程)
整个流程如下: 域名解析 为了将消息从你的PC上传到服务器 上.需要用到1P协议.ARP协议和0SPF协议 发起TCP的3次握手 建立TCP连接后发起http请求 服务器响应htp请求 浏览器解析ht ...
- MongoDB基本增删改查操作-mongo shell
基础 1.查看所有数据库: show dbs 2.选择数据库: use test 3.查看数据库中有哪些集合: show collections 如下图: 查询 1.查看集合中有哪些数据,其中abc为 ...
- js控制a标签点击事件 触发下载
问题背景,动态获取data把url赋值到a标签的url中,让a标签自动下载 首先想到的应该是$('xxx').click(), 查资料明白:js中的$(...).click()事件只能触发绑定的onC ...
- LSTM时间序列预测学习
一.文件准备工作 下载好的例程序 二.开始运行 1.在程序所在目录中(chapter_15)打开终端 输入下面的指令运行 python train_lstm.py 此时出现了报错提示没有安装mat ...
- JAVA学习5:用Maven创建第一个web项目(2)servlet演示
上一章用Maven新建了web项目成功后,本文演示在此基础上应用servlet. 1.首先修改pom.xml文件,添加servlet依赖 <project xmlns="http: ...