点这里查看原始污浊版内容

应用 clip-path 和 border-image 实现圆角突变边框。

border-image 用来指定作为元素四周边框的图像：

clip-path CSS 属性能够创立一个只有元素的局部区域能够显示的剪切区域。区域内的局部显示，区域外的暗藏。剪切区域是被援用内嵌的 URL 定义的门路或者内部 SVG 的门路。

因为应用了 clip-path 裁剪后的元素，只有元素的剪切区域能力被显示，所以咱们能够通过 clip-path: inset() 裁剪出带圆角的矩形元素。

<h1 class="border-image-clip-path"></h1>

<style>
.border-image-clip-path {
  width: 200px;
  height: 100px;
  margin: auto;
  border: 10px solid;
  border-image: linear-gradient(45deg, gold, deeppink) 1;
  clip-path: inset(0px round 10px);
  animation: huerotate 6s infinite linear;
  filter: hue-rotate(360deg);
}
@keyframes huerotate {
  0% {filter: hue-rotate(0deg);
  }
  100% {filter: hue-rorate(360deg);
  }
}

</style>

点这里查看原始污浊版内容