一、border-radius和border-image简介
border-radius：允许您为元素添加圆角边框！
border-image：属性来构造漂亮的可伸缩按钮！（例：渐变图片）
// 渐变
border-image: linear-gradient(
135deg,
rgba(183, 40, 255, 1),
rgba(40, 112, 255, 1)
)
2 2;
// 圆角
border-radius: 10px;
渐变和圆角
image.png
渐变和圆角都可以实现，但是一起用于渐变圆角边框会失效
原因查看官方规范 W3C 解释如下：
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。
二、解决方法
- 两层元素：外层渐变背景+圆角+内边距，里层圆角+白色背景
- 利用伪元素after或before：元素overflow+相对定位+内边距+圆角， 伪元素绝对定位+渐变边框
- clip-path：使用裁剪方式创建元素的可显示区域。
-
background-clip：指定背景绘制区域。
效果如图
//html
<div class="gradient_radius1 box out">
<div class="in">111gradient_radius<br />两层元素</div>
</div>
<div class="gradient_radius2 box">222gradient_radius<br />伪类</div>
<div class="gradient_radius3 box">333gradient_radius<br />clip-path</div>
<div class="gradient_radius4 box">
444gradient_radius<br />background-origin、 background-clip
</div>
//css
.box {
width: 200px;
height: 130px;
text-align: center;
display: inline-grid;
}
// 方法1
.gradient_radius1 {
&.out {
border-radius: 10px;
padding: 4px;
background: linear-gradient(
135deg,
rgba(183, 40, 255, 1),
rgba(40, 112, 255, 1)
);
}
.in {
width: 100%;
height: 100%;
background: #fff;
border-radius: 10px;
}
}
// 方法2
.gradient_radius2 {
position: relative;
border-radius: 10px;
overflow: hidden;
padding: 4px;
&::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 4px solid;
border-image: linear-gradient(
135deg,
rgba(183, 40, 255, 1),
rgba(40, 112, 255, 1)
)
1;
}
}
// 方法3
.gradient_radius3 {
position: relative;
border: 4px solid;
border-image: linear-gradient(
135deg,
rgba(183, 40, 255, 1),
rgba(40, 112, 255, 1)
)
1;
clip-path: inset(0 round 10px);
}
// 方法4
.gradient_radius4 {
border: solid 4px transparent;
border-radius: 10px;
background-image: linear-gradient(#fff, #fff),
linear-gradient(135deg, rgba(183, 40, 255, 1), rgba(40, 112, 255, 1));
background-origin: border-box;
background-clip: content-box, border-box;
}
三、总结
虽说十分不易，但是视觉效果还是挺好看的
缺点：
- 需要两个元素（1,2）
- 内容背景不可以透明（1,4）
- 里边框四角不是圆角（2,3）
- 不适用于圆形（2,3）
图例
图例
