最近的一个页面中碰到的,本来想用 border 来模拟设计图的虚线效果,但是很明显 border 效果不如设计图来的好看。顺便研究了下 dashed 和 dotted 的区别。
首先,从字面上来理解,dashed 和 dotted 都是指“虚线”,他们的不同在于:
dashed:来自 dash(破折号),由 dash 组成的虚线
dotted:来自 dot (点),由 dot 组成的虚线,也称点线
.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;
}