css是什么意思_CSS中dashed和dotted的区别

更新时间:2019-11-09 来源:模拟经营 点击:

【www.hzclsc.cn--模拟经营】

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 时,表现正常。 
  dotted-1px
 

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

dotted-different-width

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

dotted-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;
}

 

 

本文来源:http://www.hzclsc.cn/danjiyouxi/38387.html

为您推荐

【茂伸奇谈happy end】茂伸奇谈常见问题及解决方法

茂伸奇谈(茂伸奇谈-Monobeno-)日前已经发售,那么许多玩家在游戏中遇到的一些问题该怎么解决呢?下面就来分享一下茂伸奇谈常见问题及解决方法。茂伸奇谈常见问题及解决方法《茂伸奇谈-Monobeno模拟游戏

2021-02-25 18:54:41  

【欧洲卡车模拟2方向盘设置】欧洲卡车模拟2方向盘180度设置教程 欧洲卡车模拟2方向盘180度怎么设置

您的位置:首页 → 单机游戏 → 模拟游戏 → 欧洲卡车模拟2方向盘180度设置教程 欧洲卡车模拟2方向盘180度怎么设置 欧洲卡车模拟2方向盘180度设置教程 欧洲卡车模拟2方向盘180度怎么设置时模拟游戏

2021-02-25 18:54:41  

欧洲卡车模拟2配置要求|欧洲卡车模拟2低配置画面设置优化方法 欧洲卡车模拟2画面怎么设置

您的位置:首页 → 单机游戏 → 模拟游戏 → 欧洲卡车模拟2低配置画面设置优化方法 欧洲卡车模拟2画面怎么设置 欧洲卡车模拟2低配置画面设置优化方法 欧洲卡车模拟2画面怎么设置时间:2018 2 2模拟游戏

2020-12-20 11:05:28  

【深海迷航秘籍代码】深海迷航秘籍怎么用 深海迷航秘籍代码大全

深海迷航秘籍怎么用?深海迷航游戏中使用秘籍可以快速的完成任务,增加物品收益,本文带来了秘籍代码及使用方法,有需要的玩家欢迎收藏。下面就一起来看看深海迷航秘籍代码大全吧。f3 f8同时打开,勾选掉禁用控模拟游戏

2020-12-20 07:04:16  

夏色祭|夏色心跳日志PSV版发售日期一览 夏色心跳日志PSV版什么时候出

夏色心跳日志(ナツイロココロログ)是一款著名的恋爱模拟游戏,日前即将登录PSV平台,下面就来分享一下夏色心跳日志PSV版发售日期。夏色心跳日志PSV版发售日期一览dramatic create社今天宣

2020-12-19 11:04:43   夏色奇迹   夏色祭中之人