用CSS邊框圖像讓你的網站更漂亮
不久之前，添加一些裝飾性元素，例如給網頁中的圖片添加花哨的邊，以及耐心調整CSS文件才能使你的網頁看起來不錯。然而現在CSS已經做出了改變，用復雜的邊框裝飾你的網站只需幾行代碼。這篇文章將告訴你如何做到！
邊框屬性（Border Image Properties）
最普通的方法去設計邊框就是使用預設的邊框樣式屬性值。包 括： dotted, dashed,solid, double, groove, ridge, inset, 和 outset。這些樣式已經給了 你不少選擇。但是你可以更進一步使用接下來的CSS屬性去增加吸引人的背景圖片到你的邊框。
border-image-source 屬性
使用這個屬性，你可以分配一個背景圖片到element的邊框中。這個值常常是圖片的URL：
- element {
- border-image-source: url('myimage.png');
- }
- 你會發現CSS的漸變同樣產生效果：
- element {
- border-image-source: linear-gradient(10deg, #fe01f5 0%, #2e113d 100%);
- }
在瀏覽器中它大概是這樣的：
如果你設定屬性值為 none，圖片將不會顯示，瀏覽器將使用屬性 border-style 的值。因此，border-style 作為一個后備選項是個不錯的主意！
值得一提的是，你使用的圖片不需要匹配邊框的寬和高，一張小圖片就可以裝飾你的網站，如例子中的element可任意調整其圖片的大小并且可以自動識別適應屏幕的尺寸。
border-image-slice 屬性
在你使用border-image-source 屬性選擇一張圖片之后，你可以應用border-image-slice 屬性。
- element {
- border-image-slice: 19;
- }
這個屬性規定圖像上下左右的邊緣向內偏移，圖像被分割成九個區域：四個角，四條邊以及一個中間區域。
你可以規定四個數字或者百分比作為值。當你規定四個數值的時候，它應用順序為上，右，下，左。如果你省略左側偏移值，那么左邊的值將會默認和右邊數 值相同。如果你省略下方數值，它將默認與上方的相同。但如果你省略右側偏移值，它將默認與上方數值相同。如果你只使用一個數值，這個數值將會被應用在所有 偏移值上。
相對于圖像尺寸的百分比值－圖像寬度影響水平偏移，高度影響垂直偏移。
數字值代表圖像像素或者矢量坐標。另，不要在數字后面加px，否則這個屬性將不會工作。
以下是如何使用 border-image-slice屬性的例子：
- <div class="box">
- Border Image
- Lorem ipsum dolor sit amet, consectetur adipisicing elit.
- </div>
- .box {
- border: 19px dotted #c905c6;
- border-image-source: url(border-bg.png);
- border-image-slice: 19;
- }
使用一個 100 x 100px 大小的圖片：
最終效果圖大概是這樣：
中間區域呈現不可見的透明狀態，如果你想保留邊框圖像中間部分，使用關鍵詞fill。
例如，使用一個有中間區域的圖片，如果你使用關鍵詞 fill，你將得到以上的圖片。但是如果你使用它：
- .box {
- border: 19px dotted #c905c6;
- border-image-source: url(border-fill.png);
- border-image-slice: 19 fill;
- }
中間區域的圖片會出現：
雖然有點模糊，圖片看起來被壓縮，但是中間區域的圖片可視了：
border-image-width 屬性
此屬性將會繪制與所謂的突變邊界地區內部，這個邊界默認區域為border box，就像屬性border-image-slice，屬性 border-image-width 規定了內部被劃分為九個區域。
同樣的，此屬性的四個規定值可用數值或百分比代表上，右，下，左的量。百分比參考了圖像區域尺寸，圖像寬度影響水平偏移，高度影響垂直偏移。如果你使用數值，它的用法和 border-width是一樣的。例如：
- .box {
- border: 19px dotted #c905c6;
- border-image-source: url(border-bg.png);
- border-image-slice: 19;
- border-image-width: 3;
- }
… 設定邊框（border）圖片寬為邊框寬（border-width ）值的三倍，19px。結果是這樣的：
我發現如果賦值給 border-image-width 和 border-image-slice 屬性值相同，這確保你的邊框圖片處于***狀態而不模糊扭曲。
border-image-outset 屬性
目前為止我已經使用默認值插入圖片與邊框圖片區域。其實你還有一個選項將邊框圖片放在border box區域的外部。這時候你可以使用 border-image-outset 屬性。
同樣的，此屬性的四個規定值可用數值或百分比代表上，右，下，左的量，得其輸出的用法和 border-width 一樣。
為了更清楚的說明，我用綠色虛線代表 border box 的區域，粉紅色的圖片代表。邊框圖片區域。在默認的情況下，邊框圖片在綠色區域中，這表示邊框圖片區域在 border box 區域里面。
在CSS文件里加上 border-image-outset: 19px; 粉紅色部分將位于綠色部分的外面，這表明邊框圖片位于border box 區域的外面。
要注意的是在邊界框之外的部分圖像不觸發滾動（ trigger scrolling ），也不捕獲鼠標事件（ mouse events）。
你可以在 CodePen 試一試我們已經討論過的這些屬性:
border-image-repeat 屬性
這個屬性給如何延展以及鋪排邊框圖像的邊緣和中間提供了一些選擇。***個值規定了水平邊緣（上和下），第二個值則規定了數值邊緣（左和右）。如果你只提供一個值，則此值應用于所有的邊。
可用的一些值：
-
stretch – 如果你不使用 border-image-repeat 屬性的默認值。它的屬性是拉伸圖像來填充區域。
-
repeat – 平鋪圖像填充區域。如果可用面積區域不能整除圖片區塊，圖片可以被切斷。
-
round – 和 repeat 相同，但是如果可用的面積區域不能適應圖片區塊，它將自動縮放圖片直到適應為止。這導致圖片不被切斷，但是圖片可能看起來會有點變形。
-
space – 和 repeat 相同，但是如果空間不能正好適應圖片，多出的空間將分布在圖片周圍。
編寫的時候，使用火狐瀏覽器會造成 space 以及 stretch 有一樣的效果，而使用谷歌瀏覽器會造成 space 以及 repeat 擁有一樣的效果。
border-image Shorthand 屬性
將以上我們所學到的關于 border-image 屬性的單個屬性總結以下：
-
border-image-source
-
border-image-slice
-
border-image-width
-
border-image-outset
-
border-image-repeat
小例子：
- element {
- border-image: url(myimage.png) 19 / 19px / 0 round;
- }
在 CodePen 演示頁面上自己試一試 border-image-repeat 和 border-image 的屬性用法吧。
如果我想移除邊框圖片？
***方法就是使用 border Shorthand屬性重新設置邊框。使用 borderShorthand 屬性，你可以很快的重設相同寬度， 相同顏色，相同樣式的四邊。無需規定 border-image:none，也無需重寫任何單獨的 border-image 屬性。
瀏覽器支持
在編寫的時候，大多數瀏覽器都支持 border-image。只有火狐不能拉伸SVG圖片，并且Opera Mini不能支持單獨使用的屬性，除非在使用時加上前綴 -o-。
總結
這篇文章全部關于屬性 border-image : 它的值，如何以***的方式使用它們，什么瀏覽器才能支持。如果你想知道更多細節，可以查詢 CSS Backgrounds and Borders Level 3。
譯文鏈接：http://www.codeceo.com/article/css-border-image-website.html
英文原文：Decorating the Web with CSS Border Images
