除开border，background也能实现很多的边框装饰效果
今天要实现的效果：
该效果的实现完全是依靠background，其由8个渐变背景组成
左上水平线条
linear-gradient(black 1px, transparent 1px) no-repeat 0 0/8px 100%
linear-gradient(black 1px, transparent 1px) 生成一条顶部的1px的水平线条
no-repeat 背景不重复
0 0/8px 100% 中 0 0 指定背景从左上角开始，8px 100% 指定背景水平大小8px，垂直大小100%
左上角垂直线条
linear-gradient(90deg, black 1px, transparent 1px) no-repeat 0 0/100% 8px
linear-gradient(90deg, black 1px, transparent 1px) 生成一条左边的1px的水平线条
no-repeat 背景不重复
0 0/8px 100% 中 0 0 指定背景从左上角开始，8px 100% 指定背景水平大小100%，垂直大小8px
右上角水平线条
linear-gradient(black 1px, transparent 1px) no-repeat 100% 0/8px 100%
这里和左上角的水平线条的实现方式的唯一区别是我们改了背景的位置，只需将背景位置0 0改成100% 0就可以让其位于右边
右上角垂直线条
linear-gradient(90deg, transparent calc(100% - 1px), black calc(100% - 1px)) no-repeat 0 0/100% 8px
这里由于垂直线条位于右边，所以利用css的calc来计算线条的位置，这样我们只需指定背景的垂直大小就可以完成右上角的垂直线条，如果不想使用calc，也可以如下配置，不过个人觉得上面的方式更容易理解
linear-gradient(90deg, black 1px, transparent 1px) no-repeat 100% 0/1px 8px,
左下和右下的配置类似，理解background的position和size的话应该不在话下，细心点即可
加入css变量，如我们的目标一样，我们的效果还包括线条的长度和颜色的过渡效果，最简单的方式便是使用css变量，我们在这里定义一个线条颜色变量--color和线条长度变量--width，然后我们的背景就可以改写成（左上角水平线条举例）:
background: linear-gradient(var(--color) 1px, transparent 1px) no-repeat 0 0/var(--width) 100%
最终代码：
.wrapper{
--width: 8px;
--color: black;
position: relative;
padding: 6px;
width: 200px;
height: 200px;
background: linear-gradient(var(--color) 1px, transparent 1px) no-repeat 0 0/var(--width) 100%,
linear-gradient(90deg, var(--color) 1px, transparent 1px) no-repeat 0 0/100% var(--width),
linear-gradient(var(--color) 1px, transparent 1px) no-repeat 100% 0/var(--width) 100%,
linear-gradient(90deg, black 1px, transparent 1px) no-repeat 100% 0/1px var(--width),
linear-gradient(transparent calc(100% - 1px), var(--color) calc(100% - 1px)) no-repeat 100% 0/var(--width) 100%,
linear-gradient(90deg, transparent calc(100% - 1px), var(--color) calc(100% - 1px)) no-repeat 0 100%/100% var(--width),
linear-gradient(transparent calc(100% - 1px), var(--color) calc(100% - 1px)) no-repeat 0 0/var(--width) 100%,
linear-gradient(90deg, var(--color) 1px, transparent 1px) no-repeat 0 100%/100% var(--width);
transition: all .7s ease-in-out;
}
然后加上过渡：
.wrapper:hover{
--width: 50%;
--color: #078ef6;
}
其实，这个效果只要能熟练的掌握background，calc，css变量的用法，就能轻松的实现，不过比较繁琐
