border-image簡寫:
border-image: source slice width outset repeat
不簡寫，單獨設定屬性，屬性如下:
屬性屬性值
作用border-image-source
xx數字(相應的border-width倍數)/ xxpx/ xx%/ fill(保留中心部分)
邊界向內偏移多少，通俗說就是製作邊框時怎麼劃分
border-image-width
xx數字(相應的border-width倍數)/ xx%/ xxpx
影象邊界的寬度
border-image-outset
xx數字(相應的border-width倍數)/ xxpx
邊框外部繪製影象的量,通俗來說就是超過邊框寬度，向外延伸的寬度
border-image-repeat
repeat(重複) stretch(拉伸) round(鋪滿)
設定是否重複，拉伸，鋪滿
border-image-slice解析:
首先，這個屬性的屬性值有四種寫法，乙個值的時候代表四個方向的擷取值都一樣，兩個值對應上下，左右，三個值對應上，左右，下，四個值對應上，右，下，左。widtn和outset的值也是這四種寫法。
用四個值的寫法來舉例，分析這個屬性到底有什麼用:
假設值為: 10px 20px 30px 40px
然後用來設定邊框的圖如下所示:
每個值對應的切割範圍如下:
其中上分切割區域的寬度就對應第乙個值10px，右分割區域的寬度對應第二個值20px,下分割區域的寬度對應第三個值30px,左分割區域的寬度對應第四個值40px,通過這幾個區域，就將分割成了左上，上中，右上，左中，中間，右中，左下，下中，右下這九個部分，由於值不是fill,所以在用這幾個部分製作邊框時，中間會被捨棄掉。
邊框左上角就取用左上這塊切割的圖，高10px,寬40px，右上角取用右上這塊切割出的圖，高10px,寬20px，依此類推，左下角，右下角分別是高30px,寬40px的切割圖和高30px,寬20px的切割圖。
而邊框的中間部分，則分別是剩下的四塊圖，上邊框對應上中這塊圖，以此類推，右，下，左邊框對應右中，下中，左中這三塊圖，這時候就要看 border-image-repeat的屬性值了，如果是repeat和round，這幾塊圖會一直迴圈，如果是stretch，這幾塊圖就會被拉伸，然後組成邊框的中間部分。
ps:如果沒有設定border-image-slice,邊框的四個角就是縮小到對應尺寸的整張，連線四個角的中間部分將是空白。
border image屬性分析
沒用border image之前，覺得css的屬性基本夠用，border image完全是將簡單的工作複雜化，當學習完該屬性以後，發現該屬性的運用能夠大大節省編碼時間和效率，總結一下，大致適用於以下兩個場景 元素邊框不規則的情況。這時候，就需要用設計圖作為邊框背景，border image與back...
關於border image屬性
border image屬性把邊框的背景設定為。詳細解析可以檢視該 一 瀏覽器對它的支援 firefox3.5 firefox15 需要加 moz 字首 firefox15以上 同樣支援 moz 字首的css 但是必須在css 中加入border style solid 否則不會看到效果。chrom...
深入 css z index 屬性
說來汗顏，一直以來對於 css 常常是不求勝解。直到自己需要打造自己的輪子才發現對z index完全不熟悉。關於z index的問題其實非常少人完全明白它到底是怎麼運作的。事實上這並不複雜，不過如果你不曾花些時間閱讀規範可能你不曾察覺一些重要的觀念。在下面的 html 中我們有三個元素，每乙個元素包...