css渐变色圆角边框&背景透明的div

只用css能否实现一个渐变色的圆角边框 并且 满足背景是不透明呢

方法一、 border-image直接设置

 width: 200px;
 height: 100px;
 border-style: solid;
 border-width: 10px;
 border-image: linear-gradient(45deg, rgb(255, 238, 0), rgb(166, 255, 0)) 1;
 border-radius: 10px;

效果：

• 渐变边框
• div背景透明
• 圆角

参考:

既然border-image不受border-radius影响，但是受到overflow 和 background-clip 影响 那考虑试试。

方法二 border-image + border-radius + overflow: hidden

使用伪类实现一个圆角背景，然后在父元素中把多余的部分裁掉不就可以了嘛

.border2{
  margin: 50px;
  width: 220px;
  height: 120px;
  position: relative;
  overflow: hidden;
  border-radius: 10px;
}
.border2::after{
  top: 0;
  position: absolute;
  content: " ";
  display: block;
  width: 200px;
  height: 100px;
  border-style: solid;
  border-width: 10px;
  border-image: linear-gradient(45deg, rgb(255, 238, 0), rgb(166, 255, 0)) 1;
}

效果：

• 渐变边框
• div背景透明
• 圆角

虽然外部圆角有了，但内部还不是圆角

方法三 background-image + background-clip

设置两个 background-image，border-color为透明

• 背景1、background-image为渐变，在把边框clip到边框上
• 背景1、background-image为底色，在把边框clip到content/padding

  width: 220px;
  height: 120px;
  border: 10px solid transparent;
  border-radius: 10px;
  background-clip: content-box, border-box;
  background-origin: content-box, border-box;
  background-image: linear-gradient(to right, #ddd, #ddd), linear-gradient(45deg, rgb(255, 238, 0), rgb(166, 255, 0));

效果：

• 渐变边框
• div背景透明
• 圆角

如图所示，这种方式只是在渐变背景上覆盖了一个和底色一样的背景，并不是真正的透明

方法四 border-image + clip-path

实现方法和方法三一样

• 定义两个遮罩范围
• 遮罩1 范围 为 border-box
• 遮罩2 范围 为 content-box
• mask-composite 设置为 exclude ，即 有效范围为 两个区域 差集

  width: 200px;
  height: 100px;
  border-radius: 20px;
  padding: 10px;
  background: linear-gradient(45deg, rgb(255, 238, 0), rgb(166, 255, 0));
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) border-box;
  mask-composite: exclude;

效果：

• 渐变边框
• div背景透明
• 圆角

code：