border-image详解
.container {
width: 400px;
height: 200px;
background-color: rgba(79, 166, 255, 0.5);
margin: 300px;
display: flex;
justify-content: center;
align-items: center;
}
.btn {
width: 180px;
height: 30px;
text-align: center;
line-height: 30px;
font-family: SourceHanSansCN-Regular;
border-radius: 6px;
display: inline-block;
position: relative;
/* background-color: rgba(79, 166, 255, 0.5); */
cursor: pointer;
}
/* 伪元素 ::before 被用来创造一个覆盖整个容器的层，它具有圆角和渐变背景。 */
.btn::after {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
/* 内边距1px来显示边框 */
padding: 1px;
/* 圆角 */
border-radius: 6px;
/* 渐变背景，需要渐变的边框的颜色 */
background: linear-gradient(to right, yellow 0%, green 100%);
/* 随便定义一个颜色，只是为了覆盖当前这个伪元素 */
-webkit-mask-image: linear-gradient(red, red), linear-gradient(red, red);
-webkit-mask-clip: content-box, padding-box;
/* exclude排除，只显示不重合的地方 */
mask-composite: exclude;
/* 只显示下方遮罩，重合的地方不显示 */
-webkit-mask-composite: destination-out;
box-sizing: border-box;
}