css 实现渐变边框
不需要圆角的方式
<div class="box">无圆角的渐变边框</div>
.box {
border: 4px solid;
border-image-source: linear-gradient(to right, #8f41e9, #578aef);
border-image-slice: 1;
}这种方式最简洁简单。唯一缺点就是无圆角。
有圆角的方式
一般人能想到的是使用一个渐变色背景。然后里边套一层 div，设置 div 的背景色。同时设置外层和里层的圆角。这个有两个缺点。一个是多套了一层，另外一个就是圆角不一定能把握的住，不一定非常完美融合。
还有一种方式实现,分别设置 background-clip、background-origin、background-image 这三个属性，每个属性设置两组值，第一组用于设置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);
}文章来源
https://segmentfault.com/a/1190000040794056
demo 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>渐变边框</title>
<style>
html,
body {
margin: 0;
padding: 0;
}
.way-list {
display: flex;
margin: 12px;
}
.way-list .way-item {
box-sizing: border-box;
padding: 6px 12px;
border-radius: 10px;
margin-right: 20px;
}
.way-list .way-item-1 {
border: 1px solid;
border-image-source: linear-gradient(to bottom, #8f41e9, #578aef);
border-image-slice: 1;
}
.way-list .way-item-2 {
padding: 1px;
background: linear-gradient(to bottom, #8f41e9, #578aef);
}
.way-list .way-item-2 .content {
display: flex;
align-items: center;
height: 100%;
padding: 0 12px;
background: #ffffff;
border-radius: 8px;
}
.way-list .way-item-3 {
border: 1px solid transparent;
border-radius: 10px;
position: relative;
background-color: #ffffff;
background-clip: padding-box;
}
.way-list .way-item-3 .border-bg {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
z-index: -1;
margin: -1px;
border-radius: inherit;
background: linear-gradient(to bottom, #8f41e9, #578aef);
}
.way-list .way-item-4 {
border: 1px solid transparent;
border-radius: 10px;
position: relative;
background-color: #ffffff;
background-clip: padding-box;
}
.way-list .way-item-4::before {
content: '';
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
z-index: -1;
margin: -1px;
border-radius: inherit;
background: linear-gradient(to bottom, #8F41E9, #578AEF);
}
.way-list .way-item-5 {
border: 1px solid transparent;
border-radius: 10px;
background-clip: padding-box, border-box;
background-origin: padding-box, border-box;
background-image: linear-gradient(to bottom, #fff, #fff), linear-gradient(to bottom, #8F41E9, #578AEF);
}
.result {
margin: 12px;
font-weight: 500;
font-size: medium;
}
</style>
</head>
<body>
<div class="way-list">
<div class="way-item way-item-1">没有圆角</div>
<div class="way-item way-item-2">
<div class="content">需要嵌套一层,且需要用到背景颜色, 缺点父子 border radius 不准</div>
</div>
<div class="way-item way-item-3">
<div class='border-bg'></div>
<div class="content">需要嵌套两层,且需要用到背景颜色</div>
</div>
<div class="way-item way-item-4">
<div class="content">伪元素，方法 3 简化版</div>
</div>
<div class="way-item way-item-5">
最后是我觉得最优雅的一种方法，只需要用到单层元素，为其分别设置 background-clip、background-origin、background-image
这三个属性
</div>
</div>
<div class="result">还是最后一种方法最优雅啊</div>
</body>
</html>