如何在 CSS 中建立漸變邊框？

如何在 CSS 中實現漸變邊框

將漸層應用於 CSS 邊框，與預期相反，並不像看起來那麼簡單。而語法 border-color: -moz-linear-gradient(top, #555555, #111111);可能看起來直觀，但無法產生預期的效果。

要成功建立漸變邊框，必須將 border-image 屬性與 border-style 和 border-width 結合使用。以下程式碼片段說明如何實現此目的：

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

將此程式碼應用於HTML 元素，例如：

<p class="border">border-image: linear-gradient(to right, #3acfd5 0%, #3a4ed5 100%) 1</p>

將產生一個帶有漸變的邊框，該漸變從從左到右，跨越指定的邊框寬度。請注意，border-radius 在這種情況下不起作用。

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