css 手写 border样式

项目要求：

模块的border 是虚线显示，且虚线长度可以控制，所以使用dotted，dashed是不能很好的实现的。

解决方法：

使用background的linear-gradient来实现线性渐变的。

html结构

<div class="topBg">
	<div class="top">
		<div @click="navto" style="cursor: pointer">
		<i class="el-icon-plus avatar-uploader-icon"></i>
		<div class="text1">上传视频</div>
	</div>
</div>

css结构

.topBg{
	border: 1px dashed transparent;
	background: linear-gradient(-45deg,#1047f5 30%,#f1f4ff 0,#f1f4ff 50%,#1047f5 0,#1047f5 80%,#f1f4ff 0);
	background-size: 0.2rem 0.2rem;
	.top {
		background: #f1f4ff;
	}
}

讲解

在topBg模块设置线性渐变的背景，使用background-size来设置间距，添加一条透明的border

在top模块添加背景色

覆盖大部分显示出透明的border，这样就实现了虚线长度的控制。
ps 控制角度和size来改变，粗细通过border来改变