css 怎么绘制一个带圆角的渐变色的边框

夏天想2024-01-12 9:32

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是边框的颜色

推荐使用第二种方法。第一种圆角的地方不够圆滑。细看的话稍微有点和其他地方粗细不一致