border-image实现与圆角渐变边框实例页面

展示

代码

• HTML：

  <h4>1. 父元素圆角</h4>
  <div class="father">
      <div class="border-gradient">圆角渐变边框</div>
  </div>
  
  <h4>2. clip-path剪裁</h4>
  <div class="border-gradient clip-path">圆角渐变边框</div>

• CSS：

  .border-gradient {
      padding: 30px;
      border-style: solid;
      border-image: linear-gradient(deepskyblue, deeppink) 20 / 10px;
  }
  
  .father {
      border-radius: 10px;
      overflow: hidden;
  }
  .clip-path {
      -webkit-clip-path: inset(0 round 10px);
      clip-path: inset(0 round 10px);
  }