CSS3為我們提供了豐富的樣式選項(xiàng)，其中之一就是可以用花紋邊框來裝飾元素。我們可以使用CSS3的:border-image屬性來實(shí)現(xiàn)這一效果。

要先在樣式表中定義一個邊框的圖片，示例代碼如下：

.my-border {
border-image: url(border-image.png) 27 27 27 27 stretch stretch;
}

在上面的代碼中，url()指定了圖片的路徑，而27 27 27 27是指定了上、下、左、右四個方向上的邊框大小。最后兩個stretch是指如果圖片尺寸小于邊框大小的話，拉伸圖片來填滿邊框。

接下來我們就可以將該樣式應(yīng)用到元素上了：

這是一個有花紋邊框的文本框

運(yùn)行上面的樣式和元素，我們就可以看到邊框上的花紋了。不需為邊框修改顏色屬性，背景色會以這個圖片為一個不斷平鋪的基礎(chǔ)——不管這個圖片是否透明。

當(dāng)然也可以通過:border-image-outset 、:border-image-repeat、:border-image-slice、:border-image-width這幾個CSS屬性更精細(xì)地調(diào)整邊框效果。這些屬性的詳細(xì)說明可以參見W3School對:border-image的文檔。

CSS3的邊框花紋讓元素邊框的樣式更加豐富多彩，能夠幫助設(shè)計(jì)師創(chuàng)造出幾乎無限的設(shè)計(jì)可能。同時，使用邊框花紋也能增加網(wǎng)站的視覺吸引力，更能提升用戶對網(wǎng)站的印象。