目标
使用border-image
可以设置渐变色边框,但是当它与border-radius
组合使用时,两者却无法兼容。
因此,实现这个效果的另一个思路是:利用两个圆角矩形的面积差形成边框。故可以使用以下方法实现:
基础版本
使用嵌套的两个div
,并设置父元素的内边距padding
以此制造面积差,从而形成边框的效果。
<div class="border-box">
<div class="border-content"></div>
</div>
.border-box{
width: 200px;
background:linear-gradient(0deg,#00135A,#01A1FF);
border-radius: 5px;
padding: 2px;/* 边框宽度 */
}
.border-content{
width: 200px;
height: 100px;
border-radius: 5px;
background-color: white;
}
简化HTML结构版:使用伪元素
使用伪元素充当背景也同样可以达到上述效果,注意设置z-index
将伪元素置于内容之下
<div class="border-content"></div>
.border-content{
width: 200px;
height: 100px;
border-radius: 5px;
position: relative;
background-color: white;
}
.border-content::before{
content: '';
position: absolute;
top: -2px; right: -2px; bottom: -2px; left: -2px;/* 边框宽度 */
border-radius: 5px;
background: linear-gradient(0deg,#00135A,#01A1FF);
z-index: -1;/* 置于内容之下 */
}
进阶版:使用background
相关属性
给一个div
设置两个不同大小的背景,从而利用两个背景制造面积差,也可以实现上述效果。
- 如何给
div
设置两个背景?
使用background-image
属性设置两组颜色,一组是内容颜色,另一组是border边框颜色,用逗号隔开。
- 如何将两个背景设置成不同大小?
可以使用background-clip
属性,该属性规定了背景的绘制区域。给一组设置为padding-box
(背景绘制区域从内边距框开始),第二组为border-box
(背景绘制区域延伸至边框)。
此时的效果如下:
可以看出背景色并不是我们想要的效果,原因是这两组的绘制起点都是padding-box
。
- 如何更改背景绘制区域的起点?
使用background-origin
属性,该属性规定了背景的绘制区域相对于什么位置来定位。给一组设置为padding-box
(背景绘制区域以 padding 区域为参考),第二组为border-box
(背景绘制区域以 border 区域为参考)。
此时即可得到想要的效果,代码如下:
<div class="border-content"></div>
.border-content{
width: 200px;
height: 100px;
border: 2px solid transparent;
border-radius: 5px;
background-clip: padding-box,border-box;
background-origin: padding-box,border-box;
background-image: linear-gradient(0deg,#FFF,#fff),linear-gradient(0deg,#00135A,#01A1FF);
}
缺陷
该思路无法实现透明底的渐变色圆角边框。