css实现渐变色边框
阅读数:95 评论数:0
跳转到新版页面分类
html/css/js
正文
一、使用border-image
与 background-image 类似，我们可以在 border 中展示image和linear-gradient。
这种方法需要简单，但不支持设置border-radius
div {
border: 4px solid;
border-image: linear-gradient(to right, #8f41e9, #578aef) 1;
}
/* 或者 */
div {
border: 4px solid;
border-image-source: linear-gradient(to right, #8f41e9, #578aef);
border-image-slice: 1;
}参数包括：图片、裁剪位置、重复性
采用url()调用，可以是相对/绝对路径。
参数没有单位，专指像素；支持百分比，百分比相对于边框图片而言；
裁剪特性，
有1~4个参数，方位符合CSS普遍的方位规则（上右下左，顺时针）
border-image：url（border.png）30% 35% 40% 30% repeat;
二、使用background-image
思路是：使用两个盒子叠加，给下层的盒子设置渐变色背景和 padding，给上层盒子设置纯色背景。
.border-box {
width: 300px;
height: 200px;
margin: 25px 0;
}
.border-bg {
padding: 4px;
background: linear-gradient(to right, #8f41e9, #578aef);
border-radius: 16px;
}
.content {
height: 100%;
background: #222;
border-radius: 13px; /*trciky part*/
}三、两层元素：background-image background-clip
为了解决方法 2 中 border-radius 不准确的问题，可以使用一个单独的元素作为渐变色背景放在最下层，上层设置一个透明的 border 和纯色的背景（需要设置 background-clip: padding-box 以避免盖住下层元素的 border）, 上下两层设置相同的 border-radius。
.border-box {
border: 4px solid transparent;
border-radius: 16px;
position: relative;
background-color: #222;
background-clip: padding-box; /*important*/
}
.border-bg {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
z-index: -1;
margin: -4px;
border-radius: inherit; /*important*/
background: linear-gradient(to right, #8f41e9, #578aef);
}1、background-clip
用于规定背景的绘制区域：默认值为border-box，可选padding-box和content-box
四、伪元素
方法三的简化，使用伪元素替换div.border-bg
.border-box {
border: 4px solid transparent;
border-radius: 16px;
position: relative;
background-color: #222;
background-clip: padding-box; /*important*/
}
.border-box::before {
content: '';
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
z-index: -1;
margin: -4px;
border-radius: inherit; /*important*/
background: linear-gradient(to right, #8F41E9, #578AEF);
}五、单层元素 background-clip background-origin background-image
分别设置 background-clip、background-origin、background-image 这三个属性，每个属性设置两组值，第一组用于设置border内的单色背景，第二组用于设置border上的渐变色。
.border-box {
border: 4px solid transparent;
border-radius: 16px;
background-clip: padding-box, border-box;
background-origin: padding-box, border-box;
background-image: linear-gradient(to right, #222, #222), linear-gradient(90deg, #8F41E9, #578AEF);
}1、background-origin
它有两个值：
padding-box(默认):指定背景图片由padding开始展示
content-box:指定背景图片在内容区域开始展示
border-box:指定背景图片在边框区域开始展示