“我报名参加金石计划1期挑战——瓜分10万奖池，这是我的第1篇文章，点击查看活动详情”
一、垂直虚线
.dashed-y {
width: 1px;
height: 100px;
/* 原理： #000-12px 12px-transparent 从top 到 bottom 12px为止都为黑色 12px到最后为透明*/
background: linear-gradient(to bottom, #000, #000 12px, transparent 12px, transparent);
/* 图片背景插入时 宽度为100% 高度为24px */
/* 未设置no-repeat 所以将会在x、y轴上循环铺设背景 达到仿造虚线的效果 */
background-size: 100% 24px;
}
实现的原理是通过background-image中的渐变线 linear-gradient ，从上面的代码中可以看出通过to bottom表明了从top到bottom#000, #000 12px表明先是“#000”颜色 长度为“12px”，transparent 12px, transparent从“12px“开始到结束是透明色，background-size: 100% 24px;在水平方向百分百循环铺设背景，在垂直方向上以“24px”为一循环铺设背景，最后就会形成“12px”的间距的虚线
二、水平虚线
.dashed-x {
width: 500px;
height: 1px;
background: linear-gradient(to right, #000, #000 12px, transparent 12px, transparent);
background-size: 24px 100%;
}
实现的原理同上，宽高、背景图片垂直水平循环方向互换即可
效果图
三、完整的虚线框
.dottedBorder {
width: 600px;
height: 150px;
padding: 1em;
border: 10px solid transparent;
background: linear-gradient(green, white) padding-box,
repeating-linear-gradient(-45deg, yellow 0, yellow 12px, pink 12px, pink 24px);
}
自定义的完整虚线框实现原理linear-gradient(green, white) padding-box，这一段代码分别代表了background-image: linear-gradient(green, white);和background-origin: padding-box;，background-image: linear-gradient(green, white);表明了背景图为从上至下的渐变（此处是为了方便查看效果所以使用的是（green, white）实际使用的时候使用（white, white)中间将是空白)；background-origin: padding-box;表明背景图覆盖的内容包括了border以内的所有内容（不包括border)，repeating-linear-gradient(-45deg, yellow 0, yellow 12px, pink 12px, pink 24px)这段代码表明的是background-image: repeating-linear-gradient(-45deg, yellow 0, yellow 12px, pink 12px, pink 24px);此处也是background-image，根据 background-image 可以看出repeating-linear-gradient将会在linear-gradient之下 但是repeating-linear-gradient没有设置padding-box，所以是包括border的，只需保留border的宽度，并且将其颜色设置为透明，就能展示出其后的虚线框了（改为#000和#fff，宽度改为1px就会变为常规的黑白色的虚线了）
最终效果图
