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