點這裡檢視原始純淨版內容

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

點這裡檢視原始純淨版內容

本文來自部落格園，作者：墨抒穎，轉載請註明原文連結：https://www.cnblogs.com/moshuying/p/15714416.html