位置: IT常识 - 正文

CSS样式：渐变色圆角边框(css如何设置渐变色)

发布时间：2024-01-07

CSS样式：渐变色圆角边框目录预期效果解决方法1.两层元素：外层渐变背景+圆角+内边距，里层圆角+背景色2.伪元素：background-clip属性+伪元素+定位+元素本身背景（以伪元素背景色做边框）3.单层元素： background-clip+background-iamge+background-origin番外：clip-path属性预期效果

推荐整理分享CSS样式：渐变色圆角边框(css如何设置渐变色)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:css如何设置渐变色,css渐变色设置,css实现渐变色,css样式颜色渐变属性,css渐变色代码 rgba,css样式颜色渐变属性,css渐变色代码 rgba,css样式渐变色,内容如对您有帮助，希望把文章链接给更多的朋友！

最近遇到一个css样式，最终需要实现渐变色+圆角的边框，最开始我的想法是通过border-image和border-radius实现这种效果，后来发现这两个属性竟然不兼容。 border-image border-image与border-radius属性分别可以实现渐变或圆角，但是不能一起用于渐变圆角边框（如图）。官方给了一长串的解释，总的来说就是如果通过border-image属性给边框填充颜色，那么border-radius的裁剪效果就失效了。

贴了一个在线演示的地址，有兴趣的童鞋可以看一下 codepen演示地址：https://codepen.io/szy018/pen/MWGavvM

解决方法

反手贴一个在线地址，所有方法的代码都在里面，请自取。 codepen演示地址：https://codepen.io/szy018/pen/oNdjogm

1.两层元素：外层渐变背景+圆角+内边距，里层圆角+背景色 CSS样式：渐变色圆角边框(css如何设置渐变色)

还是贴个代码吧，防止被骂：

<div class="example1 out"> <div class="in">两层元素</div> </div>.example1 { &.out { padding: 4px; border-radius: 99px; background: linear-gradient(to right, red, blue); } .in { width: 100%; height: 100%; background: #fff; border-radius: 99px; }}.box { width: 200px; height: 50px; line-height: 50px; text-align: center; margin-right: 20px;}

这种方法其实是将外层元素的内边距当作边框，由于外层元素背景是渐变色，视觉上就做到了渐变色的圆角边框。由于是用内边距做的边框，多少会有点瑕疵，像下图（左边为内边距做边框），可以看到内边距左边框的内角没有真正的边框内角丝滑。是因为这是两个元素且大小不一样，所以需要分别计算两个元素的圆角大小才能百分百还原边框。缺点：这种方法需要里外两个元素，而且内容背景不可以透明(否则会暴露出外层元素的背景色)。最最重要的是内外层元素圆角大小需要计算（多少有点麻烦）。总的来说，不推荐（因为我就是用的这个方法）。

2.伪元素：background-clip属性+伪元素+定位+元素本身背景（以伪元素背景色做边框）

所有方法的代码都贴在那个地址里了哦，所有box类的样式都是一样的，这里就不贴了

<div class="example2 box">伪元素</div>.example2 { border: 4px solid transparent; position: relative; border-radius: 99px; background-color: #fff; background-clip: padding-box; &::before { content: ""; position: absolute; top: 0; right: 0; left: 0; bottom: 0; z-index: -1; margin: -4px; border-radius: 99px; background: linear-gradient(to right, red, blue); }}

background-clip属性非常好用，译名背景剪辑，它可以决定显示那一部分的元素背景，默认为border-box（边框及边框以内）。还有两个属性padding-box（内边距及内边距以内），content-box（文本内容区域）。我们可以通过伪元素，将伪元素全部显示，而元素本身使用padding-box属性值，元素本身给一个透明色的边框，防止伪元素因为超出元素区域显示不出来。就可以实现以下效果（显示的是伪元素的背景，但是区域是元素本身真实的边框区域）缺点：和方法以一样，内容背景不可以透明

background-clip兼容性还是很好的：

3.单层元素： background-clip+background-iamge+background-origin

这个方法强烈推荐，简洁优雅

.example3 { border: 4px solid transparent; border-radius: 99px; background-clip: padding-box, border-box; background-origin: padding-box, border-box; background-image: linear-gradient(to right, #fff, #fff), linear-gradient(to right, #8f41e9, #578aef);}