今天遇到几个虚线效果，不能一下子反应过来具体属性。

一、dashed和dotted的区别

首先是dashed和dotted都是指“虚线”，但是两者显示的效果不尽相同。

从字面意思来看，

dashed：来自于 dash（破折号），故虚线是由一些破折号组成的，看起来会比较明显一些。 
dotted：来自 于dot （点），故虚线由一些点组成的，也称点线，看起来是比较密。

    <style>

        .box{

            width:300px;height:50px;

            text-align:center;

            padding-top:30px;

            border-bottom:2px dotted #000;

        }

        .box1{

            width:300px;height:50px;

            text-align:center;

            padding-top:30px;

            border-bottom:2px dashed #000;

        }

    </style>

<body>

<div class="box">用div做dotted虚线！</div>

<br/>

<div class="box1">用div做dashed虚线！</div>

</body>

　　效果如图：

二、border:none;和border:0;的区别

想起来查这两个的区别，主要是我虚线是用hr来做的，然后里面设置了border：none；就随手查一下。

一般设置边框属性，不想让边框出现可以设置border:none;或border:0;两种方法均可，它们的区别一般是有两种。

1.浏览器渲染时候的性能差异

解释它们的区别和display:none;与 visibility:hidden;的区别类似，

border:0; ——把border设为“0”，在页面上看不见，但解析按border默认值理解，浏览器依然对border-width和border-color进行了渲染，即已经占用了内存值。

border:none;——把border设为“none”即没有，浏览器解析“none”时将不作出渲染动作，即不会消耗内存值。

2.浏览器兼容性的差异（没做测试，直接做的搬运工）

浏览器兼容性主要是针对IE6、IE7，并且只是对于button、input而言，设置border:none;无效，边框依然存在。

设置border:0;可以把边框隐藏。

三、用hr做虚线

 <style>

        .line{border: none;border-bottom:2px dotted #000 }

        .line1{border: none;border-bottom:2px dashed #000 }

   </style>

<p>用hr做dotted虚线</p>

<hr class="line"/>

<p>用hr做dashed虚线</p>

<hr class="line1"/>

　效果如图：　

关于css虚线的更多相关文章

  1. css虚线和css双实线

    border线型主要有:1.dotted[点状]2.solid[实线] 3.double[双实线] 4.dashed;[虚线] 如果一个CSS这样写:border-style:dotted solid ...

  2. Matplotlib数据可视化（3）：文本与轴

      在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...

  3. css 去除点击之后的虚线

    链接在被点击时会出现虚线框,即使松开了也仍然存在,在有的时候显得不美观.既然不好看,那就不要它.怎样去掉呢? 方法一 IE下可使用其私有的html属性:hideFoucs,在标签的结构中加入hidef ...

  4. CSS，点击去除虚线边框代码

  5. 用css实现自定义虚线边框

    开发产品功能的时候ui往往会给出虚线边框的效果图,于是乎,我们往往第一时间想到的是用css里的border,可是border里一般就提供两种效果,dashed或者dotted,ui这时就不满意了,说虚 ...

  6. div + css 边框 虚线

    div + css 边框 虚线 dotted:[点线|有点的|点线式边框|点虚线] .introduce { border:1px dotted gray; margin:8px 5px 8px 10 ...

  7. css 去除 a,checkbox 框 出现虚线

    在开发过程中遇到checkbox框,第一次遇到还以为是系统自带的是这样 后来发现不是那样, 我们可以在使用css 去掉出现的虚线框,以下是我的解决方案代码: /* checkbox 去掉虚框*/:fo ...

  8. CSS去除链接虚线（兼容IE6、IE7)

    在css里加入以下代码: a{    hide-focus: expression( this.hideFocus=true );    outline: none;}

  9. css去掉点击连接时所产生的虚线边框技巧兼容符合w3c标准的浏览器

    解决方法: 1.在css中加上outline:none; 代码如下: a.fontnav { text-align:left;color:#555; text-decoration:none; out ...

随机推荐

  1. 安装pycharm 2018.3 Professional Edition

    1.下载pycharm 2018.3 Professional 2.下载破解补丁,Gitee仓库 或 直接下载(Direct download link) ,并放到pycharm目录下的\bin目录( ...

  2. shell脚本，awk如何处理文件中上下关联的两行。

    文件d.txt如下内容 ggg 1portals: 192.168.5.41:3260werew 2portals: 192.168.5.43:3260 如何把文件d.txt内容变为如下内容 ggg  ...

  3. 通过工厂模式批量创建对象后调用其中方法 出现XXXis not a function()问题原因

    //通过工厂模式批量创建 function Computer(color,weight,logo){         var obj=new Object();         obj.color=c ...

  4. [JOY]1143 飘飘乎居士的约会

    题目描述 又是美妙的一天,这天飘飘乎居士要和MM约会,因此他打扮的格外帅气.但是,因为打扮的时间花了太久,离约会的时间已经所剩无几. 幸运的是,现在飘飘乎居士得到了一张nm的地图,图中左上角是飘飘乎居 ...

  5. [LUOGU] 2820 局域网

    题目背景 某个局域网内有n(n<=100)台计算机,由于搭建局域网时工作人员的疏忽,现在局域网内的连接形成了回路,我们知道如果局域网形成回路那么数据将不停的在回路内传输,造成网络卡的现象.因为连 ...

  6. [LUOGU] 1090 合并果子

    题目描述 在一个果园里,多多已经将所有的果子打了下来,而且按果子的不同种类分成了不同的堆.多多决定把所有的果子合成一堆. 每一次合并,多多可以把两堆果子合并到一起,消耗的体力等于两堆果子的重量之和.可 ...

  7. lsof指令使用简介

    lsof替代了netstat和ps的全部工作.它可以带来那些工具所能带来的一切,而且要比那些工具多得多 最重要的是,当你给它传递选项时,默认行为是对结果进行“或”运算.因此,如果是用-i来拉出一个端口 ...

  8. verilog behavioral modeling ---Block statements

    block statements : 1. sequential block  : begin-end block 2.parallel block       :  fork - join bloc ...

  9. Django REST framework 五种增删改查方法

    Django-DRF-视图的演变   版本一(基于类视图APIView类) views.py: APIView是继承的Django View视图的. 1 from .serializers impor ...

  10. Python之路-基础数据类型之字典 集合

    字典的定义-dict 字典(dict)是python中唯⼀的⼀个映射类型.他是以{ }括起来的键值对组成,字典是无序的,key是不可修改的.dic = {1:'好',2:'美',3:'啊'} 字典的操 ...