css里dotted,CSS中dashed和dotted的区别有哪些

对于刚刚接触css的朋友们来说都会分不清dashed和dotted，那么你知道CSS中dashed和dotted的区别有哪些吗？那么针对这个问题爱站小编就为大家接受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里面的after_CSS中的after
CSS中存在一些比较特殊的属性,称之为伪类,它们之中最常用的就是定义链接的伪:link,:visited,:hover,:active等. 除了它们,还有一些不被常使用的伪类,有:focus,:fir ...
css里面的after_css中:after和:before的作用及使用方法
本章给大家介绍css中:after和:before的作用及使用方法.有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 1. :before 和 :after 的主要作用是在元素内容前后加 ...
css里阴影效果,css实现阴影效果(box-shadow)
box-shadow 使用方法设置块阴影语法: box-shadow: || 取值: ? ? || : 阴影水平偏移值(可取正负值):阴影垂直偏移值(可取正负值):阴影模糊值:阴影颜色说明 ...
CSS教程:dashed和dotted的区别
最近的一个页面中碰到的,本来想用 border 来模拟设计图的虚线效果,但是很明显 border 效果不如设计图来的好看.顺便研究了下 dashed 和 dotted 的区别. 首先,从字面上来理解, ...
在css样式中隐藏元素,用JS改变的元素CSS样式，css里display :none 隐藏 block 显示
CSS样式的引用有3种方式:style引用.class引用.id引用,所以js改变元素的样式我们也分3种来说. 1.js改变由style方式引用的样式: 方法一:document.divs.style ...
html中collapse代码怎么写,CSS里的visibility属性有个鲜为人知的属性值：collapse
虽然CSS并不是一种很复杂的技术,但就算你是一个使用CSS多年的高手,仍然会有很多CSS用法/属性/属性值你从来没使用过,甚至从来没听说过. 对于CSS里的visibility属性,相信你用过不下几百 ...
php中字体样式的设置,CSS里字体样式怎么设置
在网页中我们常常对网页中文字设置字体,用font-family这个属性就可以对字体样式进行设置了.那么我们今天就来教大家从html的字体到css字体的设置方法. 原始的html字体设置 Html的文字 ...
CSS系列：CSS中盒子模型
盒子模型是CSS控制页面时一个很重要的概念.所有页面中的元素都可以看成是一个盒子,占据着一定的页面空间.可以通过调整盒子的边框和距离等参数,来调节盒子的位置和大小. 1. 盒子的内部结构在CSS中, ...
Atitit.css 规范 bem 项目中 CSS 的组织和管理
Atitit.css 规范 bem 项目中 CSS 的组织和管理 1. 什么是BEM?1 1.1. 块(Block)2 1.2. 元素(Element)2 1.3. BEM树(和DOM树类似).3 ...

css里dotted,CSS中dashed和dotted的区别有哪些

css里dotted,CSS中dashed和dotted的区别有哪些相关推荐

最新文章

热门文章