网页制作 
首页 > 网页制作 > 浏览文章

CSS dashed和dotted的区别

(编辑:jimmy 日期: 2024/11/26 浏览:3 次 )

最近的一个页面中碰到的,本来想用 border 来模拟设计图的虚线效果,但是很明显 border 效果不如设计图来的好看。顺便研究了下 dashed 和 dotted 的区别。

首先,从字面上来理解,dashed 和 dotted 都是指“虚线”,他们的不同在于:

dashed:来自 dash(破折号),由 dash 组成的虚线
dotted:来自 dot (点),由 dot 组成的虚线,也称点线

这里多说几句废话,其实参看下 demo,就能从视觉上获得更直观的感受了。
下面再说说相关的 bug 吧,当然了,这些 bug 再一次只是光荣地出现在了 IE 下,此处涉及到 IE6 和 IE7。

Bug1: 在 IE6 下,1px 宽的 dotted 表现的和 dashed 一样。当宽度大于 1px 时,表现正常。

CSS dashed和dotted的区别

Bug2:在 IE7 下,当 4 条边的宽度是 1px 和 其它任意数值共存时,1px 的 dotted 表现的和 dashed 一样。4 条边的宽度全为 1px,或者为其它不是 1px 的不同值时不会出现这个 bug。

CSS dashed和dotted的区别

Bug3:另外,IE6 下,1px 的 dotted 或者 1px 的 dashed 边框,在拖动页面时,有时候边框会连成实线,有时候会出现缺口。

CSS dashed和dotted的区别

要解决这些 bug,要么直接就不用 dotted 而直接用 dashed;要么用图片代替;要么用额外标签和代码来解决。

鉴于只有在边框宽度为 1px 时才会出现这些 bug,可以设置外包围标签的边框宽度为 2px,通过增加一个内标签,设置其为 1px 的内容背景色边框,再通过设置 margin-top/right/bottom/left: -1px; 来盖掉外包围标签的 1px 边框,从视觉上实现正常效果。很啰嗦,很讨厌,很无奈。

.b6 {
border: 2px dotted #000;
padding-top: 0;
}
.b6 .inner {
border: 1px solid #9c9c9c;
width: 100%;
height: 100%;
margin: -1px;
position: relative;
z-index: 100;
}

上一篇:css 超过宽度的文字显示点点
下一篇:未知长宽元素在已知300px*300px的容器中垂直居中(IE6/7/8/FF)
一句话新闻
一文看懂荣耀MagicBook Pro 16
荣耀猎人回归!七大亮点看懂不只是轻薄本,更是游戏本的MagicBook Pro 16.
人们对于笔记本电脑有一个固有印象:要么轻薄但性能一般,要么性能强劲但笨重臃肿。然而,今年荣耀新推出的MagicBook Pro 16刷新了人们的认知——发布会上,荣耀宣布猎人游戏本正式回归,称其继承了荣耀 HUNTER 基因,并自信地为其打出“轻薄本,更是游戏本”的口号。
众所周知,寻求轻薄本的用户普遍更看重便携性、外观造型、静谧性和打字办公等用机体验,而寻求游戏本的用户则普遍更看重硬件配置、性能释放等硬核指标。把两个看似难以相干的产品融合到一起,我们不禁对它产生了强烈的好奇:作为代表荣耀猎人游戏本的跨界新物种,它究竟做了哪些平衡以兼顾不同人群的各类需求呢?
友情链接:杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网 网站地图 SiteMap