border-image
使用 border-image 实现渐变边框
不过多介绍 border-image 的语法,读者需要自行了解一下。
<div class="border-image"></div>
.border-image { width: 200px;
height: 100px;
border-radius: 10px;
border-image-source: linear-gradient(45deg, gold, deeppink);
border-image-slice: 1;
border-image-repeat: stretch;
}
上面关于 border-image 的三个属性可以简写为 border-image: linear-gradient(45deg, gold, deeppink) 1;
border-radius 失效
A box's backgrounds, but not its border-image, are clipped to the appropriate curve (as determined by ‘background-clip’). Other effects that clip to the border or padding edge (such as ‘overflow’ other than ‘visible’) also must clip to the curve. The content of replaced elements is always trimmed to the content edge curve. Also, the area outside the curve of the border edge does not accept mouse events on behalf of the element.
法一:background-image + 伪元素
缺点
法二,使用 background-clip 实现
-
background-clip: border-box 表示设置的背景 background-image 将延伸至边框
-
background-clip: content-box 表示设置的背景 background-image 被裁剪至内容区(content box)外沿
div { width: 200px;
height: 100px;
border: solid 10px transparent;
border-radius: 10px;
background-image: linear-gradient(#fee, #fee), linear-gradient(to right, green, gold); background-origin: border-box; background-clip: content-box, border-box;}
缺点
法三:border-image + overflow: hidden
<div class="border-image-overflow"></div>
.border-image-pesudo { position: relative; width: 200px; height: 100px; border-radius: 10px; overflow: hidden;}
.border-image-pesudo::before { content: ""; position: absolute; width: 200px; height: 100px; top: 50%; left: 50%; transform: translate(-50%, -50%); border: 10px solid; border-image: linear-gradient(45deg, gold, deeppink) 1;}
法四:border-image + clip-path
- [backcolor=rgba(0, 0, 0, 0.027)]<div class="border-image-clip-path"></div>
- <div class="border-image-clip-path"></div>
.border-image-clip-path { position: relative; width: 200px; height: 100px; border: 10px solid; border-image: linear-gradient(45deg, gold, deeppink) 1; clip-path: inset(0 round 10px);}
-
clip-path: inset() 是矩形裁剪
-
inset() 的用法有多种,在这里 inset(0 round 10px) 可以理解为,实现一个父容器大小(完全贴合,垂直水平居中于父容器)且 border-radius: 10px 的容器,将这个元素之外的所有东西裁剪掉(即不可见)。