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

应用 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>

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