css中径向渐变（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.两层元素：外层渐变背景+圆角+内边距
 

 

 

 

 

 
，里层圆角+背景色

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

<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); }

背景属性都可以设置多个值            ，通过逗号分割            。从左到右显示优先级依次递减 
  
 
  
 
  
 
  
 
  
 
  
，即先声明的背景会遮盖住后声明的背景
  
 
  
 
  
 
  
 
  
 
  
 。那我们就可以通过声明两个背景实现渐变色圆角边框











，通过background-image设置两个背景色 
  
  
  
  
  
 ，然后使用background-clip属性设置第一个背景显示padding-box区域 
  
  
  
  
  
 ，第二个背景显示border-box区域（效果如图）











。

缺点：还是内容背景不可以透明

以上三种方法都有个致命的缺点

 


 


 


 


 


 
，由于都是背景填充作为边框 
 
 
 
 
 
，所以无法做到背景透明 
  
  
  
  
  
 。

番外：clip-path属性

以上就是渐变色圆角边框的解决方法 
   
   
   
   
   
  ，由于这些方法都没法做到透明背景色
 

 

 

 

 

 
，我查到了clip-path属性（裁剪属性）
  
  
  
  
  
  。

clip-path属性： 使用裁剪方式创建元素的可显示区域
 

 

 

 

 

 
，区域内的部分显示            ，区域外的隐藏
 


 


 


 


 


 

。

裁剪属性可以做到裁剪元素内容为自己想要的区域 

 
 

 
 

 
 

 
 

 
 

 
，他有一个inset（）属性 
 
 
 
 
 
。例如











，inset(0 round 10px)                  ，裁剪一个元素 
 
 
 
 
 
 
 
 
 
 
 
，大小为紧贴着这个元素（即0

















，相当于该元素相同大小）            ，且边框为10px的圆角（round 10px）
   
   
   
   
   
   。

元素本身为矩形 
  
 
  
 
  
 
  
 
  
 
  
，但是因为裁剪属性只裁剪到10px的圆角边框











，所以多余的部分就被隐藏掉了（如图）
 

 

 

 

 

 
。

虽然无法实现全圆角边框渐变 
  
  
  
  
  
 ，但可以实现矩形圆角渐变+透明背景 

 

 

 

 

 

。

以下是clip-path属性兼容性（不太行 
  
  
  
  
  
 ，几乎所有浏览器都需要加前缀）：

暂时还未发现有啥纯css方法可以实现 全圆角渐变色边框+内容背景透明

            。

如果以后发现了

 


 


 


 


 


 
，我会更新在下方

 
 

 
 

 
 

 
 

 
 

 
 。或者有大佬知道做法的 
 
 
 
 
 
，可以指导一下我 
   
   
   
   
   
  ，谢谢各位小伙伴











。