前端必会的 HTML+CSS 常用技巧 之 虚线的特殊实现方式

利用边框 border 属性

• 这个属性比较简单

<div class="dashed">利用边框 border dashed 属性实现虚线div>
<div class="dotted">利用边框 border dotted 属性实现虚线div>
1
2

div {
    width: 500px;
    padding: 10px;
}
.dashed {
    border-bottom: 1px dashed #000;
}
.dotted {
    border-bottom: 1px dotted #000;
}
1
2
3
4
5
6
7
8
9
10

• 看下这两种虚线的效果：
  

但是有时候，我们想要的效果并不是这样的，这虚线 “虚”的也太不明显了。

 
 

利用background 的 linear-gradient 属性

 

上

• 效果：
  

• 实现代码：

<div class="top">利用background 的 linear-gradient 属性实现 上 虚线div>
1

div {
    width: 500px;
    padding: 10px;
}
.top {
    background: linear-gradient(
        to left,
        transparent 0%,
        transparent 50%,
        red 50%,
        red 100%
    );
    background-size: 10px 1px; /* 第一个参数控制虚线的间隙（利用的是图片的放大效果一样），第二个参数控制虚线的粗细 */
    background-repeat: repeat-x;
    background-position: top; /* 控制方向：top、bottom */
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

 

下

• 效果：
  

• 实现代码：

<div class="bottom">利用background 的 linear-gradient 属性实现 下 虚线div>
1

div {
    width: 500px;
    padding: 10px;
}
.bottom {
   background: linear-gradient(
        to left,
        transparent 0%,
        transparent 50%,
        blue 50%,
        blue 100%
    );
    background-size: 10px 1px; /* 第一个参数控制虚线的间隙（利用的是图片的放大效果一样），第二个参数控制虚线的粗细 */
    background-repeat: repeat-x;
    background-position: bottom; /* 控制方向：top、bottom */
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

 

左

• 效果：
  

• 实现代码：

<div class="left">利用background 的 linear-gradient 属性实现 左 虚线div>
1

div {
    width: 500px;
    padding: 10px;
}
.left {
    background: linear-gradient(
        transparent 0%,
        transparent 50%,
        #000 50%,
        #000 100%
    );
    background-size: 1px 10px; /* 竖的虚线与横虚线刚好相反，第一个参数控制虚线的粗细，第二个参数控制虚线的间隙 */
    background-repeat: repeat-y;
    background-position: left; /* 控制方向：right、left */
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

 

右

• 效果：
  

• 实现代码：

<div class="right">利用background 的 linear-gradient 属性实现 右 虚线div>
1

div {
    width: 500px;
    padding: 10px;
}
.right {
    background: linear-gradient(
        transparent 0%,
        transparent 50%,
        orange 50%,
        orange 100%
    );
    background-size: 1px 10px; /* 竖的虚线与横虚线刚好相反，第一个参数控制虚线的粗细，第二个参数控制虚线的间隙 */
    background-repeat: repeat-y;
    background-position: right; /* 控制方向：left、right */
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

 

矩形

• 效果：
  

• 实现代码：

<div class="rectangle">利用background 的 linear-gradient 属性实现 矩形 虚线div>
1

div {
    width: 500px;
    padding: 10px;
}
.rectangle {
   border: 1px dashed transparent;
    background: linear-gradient(#fff, #fff) padding-box, repeating-linear-gradient(-45deg, #000 0, #000 .3em, #fff 0, #fff .6em);
    /* .3em 控制虚线的宽度或者长度，.6em 控制虚线的间隙 */
}
1
2
3
4
5
6
7
8
9

 
 

如有不足，望大家多多指点！ 谢谢！