Css3中的border-image屬性詳細介紹

我們知道，border-image這個屬性使用的初衷就是將複雜的工作簡單化，當你熟練掌握這個屬性後你會發現你極大的節省了編碼的時間和效率。接下來教大家如何使用border-image。

元素邊框不規則的情況。這時候，就需要用設計圖作為邊框背景，border-image與background-image相比，好處是更具靈活性，可以用代碼控制邊框背景的展開和重複，因而能夠創造出更多樣的效果

按鈕寬高不確定的情況。用border-image來製作按鈕，可以用同一張背景圖，製造出各種寬高的按鈕。

border-image屬性分析

邊框背景圖片。格式為：url(“…”)。

border-image-slice

圖片邊框向內位移的距離。格式：border-image-slice：top right bottom left。分別指切割背景圖片的四條線距離上右下左的距離。

該距離接受數值，百分數。預設數值的單位是px,但是不能在數值後面加px，否則這句css將不被瀏覽器解析。 用法和margin，padding類似。這裡以數值舉例，百分數同理。

border-image-slice: 10; /*距離上下左右均為10px;*/

border-image-slice: 10 30; /*距離上下10px,左右30px;*/

border-image-slice: 10 30 20; /*距離上10px,下20px,左右30px;*/

border-image-slice: 10 30 20 40; /*距離上10px,右30px,下20px,左40px;*/

四條線將背景圖分割成了9個部分，其中1,2,3,4,6,7,8,9這八個地區將會被切割，作為圖片邊框，如果除了設定數值或者百分數，還加了一個“fill”，那麼地區5就會作為背景填充進元素content，如：

border-image-slice: 25 11 fill;

注意：slice不接受負值；如果slice切割的左右距離之和大於背景圖的寬，則上下邊框不顯示。如果slice切割的上下距離之和大於背景圖的高，則左右邊框不顯示。

border-image-width

圖片邊框的寬度。只接受數值，且不能加單位。

相信看了這些案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

相關閱讀：

用H5製作煙花粒子特效的製作方法

HTML網頁最佳化壓縮的實現步驟

網頁中使用h標籤的開發經驗