css3 渐变边框如何实现圆角效果

常规的 border-image 属性如果直接使用 border-radius 会无效，关于如何实现渐变边框圆角，网上流传着大概这么几种办法：

1. 渐变背景方式（仅适用于纯底色背景）
2. 借助 after 伪类（仅适用于纯底色背景）
3. 借助 css3 中的 mask 遮罩蒙版 加 after 伪类实现（仅适用于任何背景，但需要考虑浏览器兼容性）

本文仅介绍第三中方法：

源码如下：

<style>
.border-radius-4 {
  position: relative;
  z-index: 1;
  width: 80px;
  height: 80px;
  text-align: center;
  padding: 10px;
  box-sizing: border-box;
}
.border-radius-4:after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: linear-gradient(to bottom right, rgba(98, 54, 255, 0.3), rgba(252, 53, 100, 0.3));
  /* 径向渐变中的 30px 计算方法为 (宽度 / 2 - 边框大小)，此处为 80px / 2 - 10px */
  mask-image: radial-gradient(transparent 0 30px, #000 30px);
  -webkit-mask-image: radial-gradient(transparent 0 30px, #000 30px);
}
</style>
<div class="border-radius-4">内容</div>

效果参考地址