1，可以写两个样式最外面的div设置一个渐变的背景色。里面的元素使用纯色。但是宽高要比外面元素的小。可以利用里面的元素设置padding这样挡住部分渐变色。漏出来的渐变色就像边框一样。
<div class="cover-wrapper">
<div class="item-cover">
</div>
</div>
.cover-wrapper{
background: linear-gradient(310deg,#821ced,#e7166b);
border-radius:16px;
}
.item-cover{
border-radius:16px;
padding:2px;//padding值就是渐变边框的宽度
background:#000;
}
2.使用
background-image
border: 1px solid transparent; background-clip: padding-box,border-box; background-origin: padding-box,border-box; background-image: linear-gradient(90deg,#BBFAEB,#DCF9E6 42%,#F4F9E2),linear-gradient(151deg,#33e9bf,#c7e58a,#b1e8cc);#BBFAEB,#DCF9E6 42%,#F4F9E2是填充的颜色
#33e9bf,#c7e58a,#b1e8cc是边框的颜色
推荐使用第二种方法 。第一种圆角的地方不够圆滑。细看的话稍微有点和其他地方粗细不一致文章来源：https://www.toymoban.com/news/detail-803652.html
文章来源地址https://www.toymoban.com/news/detail-803652.html
到了这里，关于css 怎么绘制一个带圆角的渐变色的边框的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
