CSS dashed和dotted的差别

日期:2021-03-14 类型:科技新闻 

关键词:小程序如何制作,预约小程序,微信小程序怎么做,微信抽奖小程序,小程序外包

近期的1个网页页面中碰到的,原本想用 border 来仿真模拟设计方案图的虚线实际效果,可是很显著 border 实际效果比不上设计方案图来的漂亮。顺带科学研究了下 dashed 和 dotted 的差别。

最先,从字面上来了解,dashed 和 dotted 全是指“虚线”,她们的不一样在于:

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

这里多说几句空话,实际上参看下 demo,就可以从视觉效果上得到更直观的体会了。
下面再说说有关的 bug 吧,自然了,这些 bug 再1次只是无上光荣地出現在了 IE 下,此处涉及到到 IE6 和 IE7。

Bug1: 在 IE6 下,1px 宽的 dotted 主要表现的和 dashed 1样。当宽度超过 1px 时,主要表现一切正常。

Bug2:在 IE7 下,当 4 条边的宽度是 1px 和 其它随意标值共存时,1px 的 dotted 主要表现的和 dashed 1样。4 条边的宽度全为 1px,或为其它并不是 1px 的不一样值时不容易出現这个 bug。

Bug3:此外,IE6 下,1px 的 dotted 或 1px 的 dashed 边框,在拖拽网页页面时,有时边框会连成实线,有时会出現缺口。

要处理这些 bug,要末立即就无需 dotted 而立即用 dashed;要末用照片替代;要末用附加标识和编码来处理。

鉴于仅有在边框宽度为 1px 时才会出現这些 bug,能够设定外包围着标识的边框宽度为 2px,根据提升1个内标识,设定其为 1px 的內容情况色边框,再根据设定 margin-top/right/bottom/left: ⑴px; 来盖掉外包围着标识的 1px 边框,从视觉效果上完成一切正常实际效果。很唠叨,很反感,很无可奈何。

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