如何实现带border-radius的渐变边框？border-image兼容问题求助

原代码中border-image与border-radius无法同时生效，这是浏览器不支持两者组合导致的问题。以下提供两种可靠的实现方式：

方案一：伪元素叠加法 #

通过伪元素生成渐变背景层，配合容器的padding和border-radius，实现视觉上的渐变圆角边框效果。

代码示例 #

.container{
  background: #ffffff;
  box-shadow: 1px 1px 12px 3px rgba(108, 128, 147, 0.25);
  border-radius: 18px;
  /* 预留边框厚度的空间 */
  padding: 9px;
  position: relative;
  z-index: 1;
}
.container::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 18px;
  background: linear-gradient(337.17deg, #00d4f1 10%, #6061c4 50%, #ffabed 100%);
  z-index: -1;
}

<div class="container flex flex-col justify-start items-center w-3/12 pt-6 pb-7 pl-6 pr-6 relative">
  <!-- 内部内容 -->
</div>

方案二：多重背景结合background-clip #

利用多重背景分别设置渐变边框和白色内容背景，通过background-clip和background-origin区分显示区域，搭配透明边框实现效果。

代码示例 #

.container{
  background-image: 
    linear-gradient(337.17deg, #00d4f1 10%, #6061c4 50%, #ffabed 100%),
    linear-gradient(#ffffff, #ffffff);
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
  border-radius: 18px;
  /* 设置透明边框，厚度对应所需边框宽度 */
  border: 9px solid transparent;
  box-shadow: 1px 1px 12px 3px rgba(108, 128, 147, 0.25);
}

<div class="container flex flex-col justify-start items-center w-3/12 pt-6 pb-7 pl-6 pr-6 relative">
  <!-- 内部内容 -->
</div>

说明 #

• 方案一兼容性更强，适配所有现代浏览器；
• 方案二代码更简洁，现代浏览器均支持相关属性；
• 两种方案都能完美实现带圆角的渐变边框，可根据实际场景选择。

内容的提问来源于stack exchange，提问作者Jundev