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

一、dashed和dotted的区别

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

从字面意思来看，

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

  1.     <style>
  2.  
  3.         .box{
  4.             width:300px;height:50px;
  5.             text-align:center;
  6.             padding-top:30px;
  7.             border-bottom:2px dotted #000;
  8.         }
  9.         .box1{
  10.             width:300px;height:50px;
  11.             text-align:center;
  12.             padding-top:30px;
  13.             border-bottom:2px dashed #000;
  14.         }
  15.  
  16.     </style>
  17.  
  18. <body>
  19. <div class="box">用div做dotted虚线！</div>
  20. <br/>
  21. <div class="box1">用div做dashed虚线！</div>
  22. </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做虚线

  1.  <style>
  2.         .line{border: none;border-bottom:2px dotted #000 }
  3.         .line1{border: none;border-bottom:2px dashed #000 }
  4.    </style>
  5.  
  6. <p>用hr做dotted虚线</p>
  7. <hr class="line"/>
  8. <p>用hr做dashed虚线</p>
  9. <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. Java截取视频文件缩略图

    /** * 截取视频第0帧的图片 */public static void videoImage(String filePath, String fileName,int widthdist, int ...

  2. common-configuration的一些应用

    此程序依赖commons-configuration-1.6.jar和commons-lang-2.6.jar两个jar包. 需要先在工程的src目录下建立如下几个文件: config.propert ...

  3. windows 下phpstudy 升级mysql版本5.7

    今天在导入sql文件的时候遇到了sql执行错误.最后找到原因是因为mysql版本过低,导致出错 原因:在执行sql的时候出现了两次CURRENT_TIMESTAMP ,最后得知在5.7版本之前都是不支 ...

  4. linux各种终端类型的区别和概念

    1 pty(虚拟终端或伪终端): 当我们远程telnet到主机或使用xterm时不也需要一个终端交互么?是的,这就是虚拟终端pty(pseudo-tty). 2 tty(终端设备的统称):tty一词源 ...

  5. perl学习之五：列表和数组

    列表及其形式 数组 数组的赋值 数组的读取 数组片段 数组函数 二维数组简介 总结 1.列表形式: 1.(item1,item2,...) 2.qw(item1 item2 item3 ...) 3. ...

  6. Python爬虫-字体反爬-猫眼国内票房榜

    偶然间知道到了字体反爬这个东西, 所以决定了解一下. 目标:  https://maoyan.com/board/1 问题: 类似下图中的票房数字无法获取, 直接复制粘贴的话会显示 □ 等无法识别的字 ...

  7. Python中的socket网络编程(TCP/IP，UDP)讲解

    在网络编程中的一个基本组件就是套接字(socket).套接字基本上是两个端点的程序之间的"信息通道".程序可能分布在不同的计算机上,通过套接字互相发送信息.套接字包括两个:服务器套 ...

  8. PAT Basic 1051

    1051 复数乘法 复数可以写成 (A+Bi) 的常规形式,其中 A 是实部,B 是虚部,i 是虚数单位,满足 i​2​​=−1:也可以写成极坐标下的指数形式 (R×e​(Pi)​​),其中 R 是复 ...

  9. python基础学习笔记——collections模块

    在内置数据类型(dict.list.set.tuple)的基础上,collections模块还提供了几个额外的数据类型:Counter.deque.defaultdict.namedtuple和Ord ...

  10. python中判断字符串是否为中文

    判断字符串是否在中文编码范围内 for c in s:        if not ('\u4e00' <= c <= '\u9fa5'):            return False ...