直角渐变色边框
border-image
代码：index.html HTML:
<div class="box"></div>
CSS:
.box {
width: 100px;
height: 100px;
border: 20px solid;
border-image: linear-gradient(to bottom, red, blue) 1 1;
}
结果： 20px 和 1px 对比
圆角渐变色边框
父级：overflow:hidden ，子级：border-image
代码：index2.html HTML:
<div class="parent">
<div class="child box"></div>
</div>
CSS:
.parent {
overflow: hidden;
border-radius: 10px;
width: fit-content;
height: fit-content;
}
.box {
width: 100px;
height: 100px;
border: 20px solid;
border-image: linear-gradient(to bottom, red, blue) 1 1;
}
结果： 20px 和 1px 对比
使用伪类： background-image 、background-clip
代码：index3.html HTML:
<div class="box"></div>
.box {
width: 100px;
height: 100px;
border: 20px solid transparent; /*important*/
border-radius: 10px;
position: relative;
background-color: yellow;
background-clip: padding-box; /*important*/
}
\
.box::before {
content: '';
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
border-radius: inherit; /*important*/
background-image: linear-gradient(to bottom, red, blue);
margin: -20px; /*important*/
z-index: -1; /*important*/
}
结果： 20px 和 1px 对比
注意：box里面的border-color必须不能是有透明度的颜色（rgba），且必须得有颜色，不然无法遮挡住伪类的背景渐变色
background-clip + backgrond-image
代码：index4.html HTML:
<div class="box"></div>
CSS:
.box {
width: 100px;
height: 100px;
border: 20px solid transparent; /*important*/
border-radius: 10px;
background-image: linear-gradient(to top, yellow, yellow), linear-gradient(to bottom, red, blue);
background-clip: padding-box, border-box; /*important*/
background-origin: padding-box, border-box; /*important*/
}
结果： 20px 和 1px 对比
注意：box里面的border-color必须不能是有透明度的颜色（rgba），且必须得有颜色，不然无法遮挡住伪类的背景渐变色
父级：border + border-radius 子级：1-4条渐变色线定位（使用background实现线）
HTML:
<div class="box" ></div>
<div class="box2" style="margin-top:30px"></div>
CSS:
.box {
width: 100px;
height: 100px;
border: 20px solid transparent; /*important*/
border-radius: 10px;
position: relative;
}
.box::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
right:0;
z-index: -1;
background-image: linear-gradient(to right, yellow, pink),linear-gradient(to right, yellow, pink),linear-gradient(to bottom, red, blue), linear-gradient(to bottom, red, blue);
background-size: 100% 20px, 100% 20px,20px 100%, 20px 100%;
background-position: center 0%, center 100%, 0% center, 100% center;
background-repeat: no-repeat;
border-radius: inherit;
margin: -20px;
}
\
.box2 {
width: 100px;
height: 100px;
border: 20px solid transparent; /*important*/
border-radius: 10px;
position: relative;
}
.box2::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
right:0;
z-index: -1;
background-image: linear-gradient(to right, red, blue),linear-gradient(to right, red, blue),linear-gradient(to bottom, red, red), linear-gradient(to bottom, blue, blue);
background-size: 100% 20px, 100% 20px,20px 100%, 20px 100%;
background-position: center 0%, center 100%, 0% center, 100% center;
background-repeat: no-repeat;
border-radius: inherit;
margin: -20px;
}
结果：4个边框，4个颜色渐变 - 20px 和 1px 对比
