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; /*##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標籤的開發經驗
#

以上是Css3中的border-image屬性詳細介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！