div四角边框——linear-gradient

效果图上先：

接着代码：

.border {
	margin: 300px auto;
	width: 200px;
	height: 100px;
	background: linear-gradient(blue, blue) left top,
		linear-gradient(blue, blue) left top,
		linear-gradient(blue, blue) right top,
		linear-gradient(blue, blue) right top,
		linear-gradient(blue, blue) left bottom,
		linear-gradient(blue, blue) left bottom,
		linear-gradient(blue, blue) right bottom,
		linear-gradient(blue, blue) right bottom;
	background-repeat: no-repeat;
	background-size: 1px 24px, 24px 1px;
}

 

这里主要是利用了一个background可以定义多个linear-gradient，且可以定义位置的原理实现。

 

此时的linear-gradient的主要作用不再是线性渐变，所以多余的属性可以去掉，定义两个相同的颜色即可，然后接线条位置。

这里总共有8条线，第一条线对应background-size为1px 24px；第二条线对应24px 1px。后续几条线重复，所以省略了。

background-repeat: no-reapeat；表示每条线不需要重复。

更新：拓展(背景渐变的完全体)----四角边框，上下边框纯色，左右边框渐变色，整体纯色

代码

.el-card{
  background: radial-gradient(circle at center center, rgba(23, 48, 78, 1), rgba(20, 37, 63, 1)),
  linear-gradient(rgba(179,224,255,0.62), rgba(179,224,255,0.62)) left top,
  linear-gradient(rgba(179,224,255,0.62), rgba(179,224,255,0.62)) left top,
  linear-gradient(rgba(179,224,255,0.62), rgba(179,224,255,0.62)) right top,
  linear-gradient(rgba(179,224,255,0.62), rgba(179,224,255,0.62)) right top,
  linear-gradient(rgba(179,224,255,0.62), rgba(179,224,255,0.62)) left bottom,
  linear-gradient(rgba(179,224,255,0.62), rgba(179,224,255,0.62)) left bottom,
  linear-gradient(rgba(179,224,255,0.62), rgba(179,224,255,0.62)) right bottom,
  linear-gradient(rgba(179,224,255,0.62), rgba(179,224,255,0.62)) right bottom,
  linear-gradient(rgba(56, 144, 184, 0.60), rgba(56, 144, 184, 0.60)) top,
  linear-gradient(rgba(26, 87, 130, 0.60), rgba(26, 87, 130, 0.60)) bottom,
  linear-gradient(rgba(56, 144, 184, 0.60), rgba(219, 240, 255, 0.80), rgba(26, 87, 130, 0.60)) left,
  linear-gradient(rgba(56, 144, 184, 0.60), rgba(219, 240, 255, 0.80), rgba(26, 87, 130, 0.60)) right;
  background-repeat: no-repeat;
  background-position: 1px 1px, 0px 0px, 0px 0px, 0px 100%, 0px 100%, 100% 0px, 100% 0px, 100% 100%, 100% 100%, 0px 0px, 0px 100%, 0px 100%, 100% 100%;
  background-size: calc(100% - 2px) calc(100% - 2px), 1px 10px, 10px 1px, 1px 10px, 10px 1px, 1px 10px, 10px 1px, 1px 10px, 10px 1px, 100% 1px, 100% 1px, 1px 100%, 1px 100%;
}