使用 border-image 建立多色邊框

CSS

.bordered {
  border-image: linear-gradient(to right, red 20%, green 20%, green 40%, blue 40%, blue 60%, maroon 60%, maroon 80%, chocolate 80%); /* gradient with required colors */
  border-image-slice: 1;
}

HTML

<div class='bordered'>Border on all sides</div>

上面的例子將產生一個由 5 種不同顏色組成的邊框。顏色是通過 linear-gradient 定義的（你可以在文件中找到有關漸變的更多資訊 ）。你可以在同一頁面的 border-image 示例中找到有關 border-image-slice 屬性的更多資訊。

（ 注意：為了表示目的，已將附加屬性新增到元素中。 ）

你已經注意到左邊框只有一種顏色（漸變的起始顏色），而右邊框也只有一種顏色（漸變的結束顏色）。這是因為邊框影象屬性的工作方式。就好像將漸變應用於整個框，然後從填充和內容區域中遮蓋顏色，從而使其看起來好像只有邊框具有漸變。

哪個邊框具有單一顏色取決於漸變定義。如果漸變是 to right 漸變，則左邊框將是漸變的起始顏色，右邊框將是最終顏色。如果它是 to bottom 漸變，則頂部邊框將是漸變的開始顏色，而底部邊框將是最終顏色。以下是 to bottom 5 彩色漸變的輸出。

如果僅在元素的特定邊上需要邊框，則可以使用 border-width 屬性，就像使用任何其他正常邊框一樣。例如，新增以下程式碼將僅在元素的頂部生成邊框。

border-width: 5px 0px 0px 0px;

請注意，任何具有 border-image 屬性的元素都不會尊重 border-radius（即邊框不會彎曲）。這是基於規範中的以下宣告：

框的背景，但不是其邊框影象，被剪下到適當的曲線（由’background-clip’確定）。