多色邊框：CSS 解決方案
製作多種顏色的邊框可以增強任何網頁元素的視覺吸引力。實現此效果的一種方法是使用偽元素，但更直接的方法涉及 border-image 屬性。
border-image 屬性使您能夠指定要用作邊框的圖像一個元素的。在本例中，使用線性漸層來建立多色效果。考慮以下範例：
.fancy-border {
width: 150px;
height: 150px;
text-align: center;
border-top: 5px solid;
border-image: linear-gradient(to right, grey 25%, yellow 25%, yellow 50%, red 50%, red 75%, teal 75%) 5;
}在
<div class="fancy-border"> my content </div>
此程式碼將建立一個帶有多色頂部邊框的 150px x 150px 框。線性漸層定義了用於邊框的顏色順序：灰色 (25%)、黃色 (25%)、黃色 (50%)、紅色 (50%)、紅色 (75%) 和青色 (75%)。 border-image 屬性末端的 5 指定邊框的寬度（以像素為單位）。
以上是如何使用 CSS 建立多色邊框？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
