CSS教程:dashed和dotted的区别

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

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

dashed：来自 dash（破折号），由 dash 组成的虚线
dotted：来自 dot （点），由 dot 组成的虚线，也称点线

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

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

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

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

要解决这些 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教程:dashed和dotted的区别相关推荐

css里dotted,CSS中dashed和dotted的区别有哪些
对于刚刚接触css的朋友们来说都会分不清dashed和dotted,那么你知道CSS中dashed和dotted的区别有哪些吗?那么针对这个问题爱站小编就为大家接受CSS中dashed和dotted的 ...
用CSS添加鼠标样式-箭头、小手、十字 CSS实现虚线之dotted边框-点虚线、dashed边框-破折号虚线
用CSS添加鼠标样式-箭头.小手.十字- & CSS实现虚线之dotted边框-点虚线.dashed边框-破折号虚线 //小手样式 cursor:pointer; cursor其他取值 aut ...
前端开发系列（十一）CSS教程（6）
一.CSS盒模型 1.1.元素分类在讲解 CSS 布局之前,我们需要提前知道一些知识,在 CSS 中,html 的标签元素大体被分为三种不同的类型:块状元素.内联元素(又叫行内元素)和内联块状元素 ...
html js不触发_图文详解鼠标事件CSS:hover和JS:mouseover的区别
在工作中为了使页面更具有吸引力,前端开发人员经常会在页面中加上鼠标移入和移出的效果.鼠标移入移出的设置,一般有两种方法,一种是单纯用CSS中的hover伪类,另一种可以用JS 中的DOM事件,即onm ...
html段落排版,美化网页段落排版的css教程
美化网页段落排版的css教程上四篇的内容是把常用的XHTML标签拿出来介绍了一下,不是很详细.不过没关系,重点是要能先知道用他们,以后深入了再去细细研究更为详细的特性以及使用方法就容易多了.上篇已经 ...
Html设置表格撑开,CSS教程:表格不被撑开的解决办法
CSS教程:表格不被撑开的解决办法 2009-10-21 eNet&Ciweek 今天在做一个用户留言列表的时候,用到了表格.用户名为英文字符时,就会把固定宽度的单元格撑开.之前也有遇到过.解 ...
html 单元格被撑开_CSS教程:表格不被撑开的解决办法—css教程
今天在做一个用户留言列表的时候,用到了表格.用户名为英文字符时,就会把固定宽度的单元格撑开.之前也有遇到过.解决办法:先用noWrap令文字不换行,再用style=table-layout:fixed ...
css教程之列表属性
列表属性(相关css教程) CSS属性: 7.列表属性: 这里的属性用来描述列表(list)的一系列属性. list-style-type属性描述用于列表每一项前使用的符号: 属性名称: 'lis ...
css教程–十步学会用css建站(全)
css教程–十步学会用css建站(全) 转载于:https://www.cnblogs.com/reommmm/articles/1195548.html

CSS教程:dashed和dotted的区别

CSS教程:dashed和dotted的区别相关推荐

最新文章

热门文章