如何正確使用 CSS 建立漸層邊框？

使用 CSS 定義漸變邊框

使用漸變效果設計邊框可為 Web 元素增添一抹視覺趣味。 CSS 中的 border-image 屬性可讓您對邊框套用漸層。

問題：

在嘗試建立漸變邊框時，使用了以下程式碼：

border-color: -moz-linear-gradient(top, #555555, #111111);

然而，這種方法並沒有達到預期的效果。實現邊框漸層的正確方法是什麼？

答案：

border-image 屬性完成此任務。除了 border-width 和 border-style 之外，它還允許漸變邊框。

範例：

.border {
  border-image: linear-gradient(to right, #3acfd5 0%, #3a4ed5 100%) 1;
  border-width: 4px;
  border-style: solid;
  padding: 5px;
}

此程式碼建立一個帶有漸變的邊框，該漸變從左到右#3acfd5 到#3a4ed5。

以上是如何正確使用 CSS 建立漸層邊框？的詳細內容。更多資訊請關注PHP中文網其他相關文章！