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>

效果參考地址