IT兄弟連 HTML5教程 CSS3屬性特效 邊框

經過CSS3，咱們可以建立圓角邊框，向矩形添加陰影，使用圖片來繪製邊框。而且不需使用設計軟件，好比photoshop。

 

1  邊框圖片border-image

border-image爲邊框應用圖片，顧名思義就是爲圖片應用背景圖片。它和咱們經常使用的background屬性比較類似，可是又比背景圖片複雜一些。例如：

background: url(「image.jpg」) 10px 20px no-repeat;      

border-image屬性是一個簡寫屬性，用於設置如下屬性，具體描述如表1：

表1  CSS3 border-image屬性說明

 

    

想象一下：一個矩形，有四個邊框。若是應用了邊框圖片，圖片該怎麼分佈呢？圖片會自動被分隔成四等分，用於四個邊框。

能夠理解border-image是一個切片工具，會自動把用做邊框的圖片切割。怎麼切割呢？爲了方便理解，下面有一張特殊的圖片，有9個正方形（對角線的長度爲70像素）拼成的一張圖（210*210像素），並標註好序號，就如傳說中的九宮格，以下：

 

將該圖片應用於一個矩形的邊框，並讓邊框圖片的延伸方式設爲重複，代碼以下：

 

運行上面的代碼，咱們能夠看到該矩形的邊框變成了圖片。如圖1所示：

圖1  圖片邊框 

 

從序號能夠看出div的四個角分別對應了背景圖片的四個角1,3,9,7。而2,4,6,8被重複在四個邊。由於是從四周向中心切割圖片的，因此5不顯示出來。上述例子中border-image包含三個參數，第一個參數「url(border.png) 」表示邊框圖片的引入路徑；第二個參數「70」表示切割圖片的寬度，單位爲像素，但通常省略單位，也可使用百分比，當四邊寬度相等時可使用一個值，當設置四個值時遵循順時針的規律來分別設置；第三個參數「repeat」表示圖片的延伸方式爲重複，有三個可選參數round（平鋪）、repeat（重複）、stretch（拉伸）。

repeat的意思就是重複，由於上述例子中的邊框寬度正好數字塊寬度，效果不能很好地體現出來，下面改變div的寬度，再看看repeat的效果，修改後CSS的樣式以下：

 

這裏咱們將div的寬度縮小了30px變爲180px，在瀏覽器中查看效果如圖2所示：

 

圖2  邊框圖片repeat重複

 

在圖2裏，咱們能夠看出矩形的邊角部分被裁掉了，repeat就是從邊框的中間一直重複而且超出部分被裁掉。

再來設置爲div的border-image-repeat設置round，round能夠理解爲圓滿的鋪滿，爲了實現圓滿因此會壓縮（或拉伸），將上述例子的延伸方式改變，修改的CSS代碼以下：

 

這裏咱們將邊框圖片的延伸方式修改成round，在瀏覽器中查看效果如圖3所示：

圖3  背景圖片平鋪（round） 

 

對比repeat的效果，咱們能夠發現round的圖片被壓縮了，並無被截取。

接下來設置爲div的border-image-repeat設置stretch，stretch是拉伸，將上述例子的延伸方式改變，修改的CSS代碼以下：

 

將CSS替換後，運行上述代碼，能夠發現邊框圖片被拉伸，而不是重複。在瀏覽器中查看效果如圖4所示：

圖4 邊框圖片拉伸（stretch）

 

2  自適應的圓角效果

實現該效果時使用的圖片以下：

 

此圖片的剪裁寬度爲20像素，基本上就是此圖的圓角大小。div的邊框寬度爲10像素，代碼以下：

 

運行上述代碼，div的邊框實現了上面圖片製做的圓角效果。在瀏覽器中查看效果如圖5所示：

圖5  自適應圓角效果

 

一樣地，咱們還可使用圖片來實現多邊框效果，投影效果和選項卡效果等。

1．使用下面圖片實現多邊框效果

 

使用上面的代碼，修改邊框圖片，在瀏覽器中查看效果如圖6所示：

 

 圖6  多邊框效果

 

2．投影效果

使用下面圖片實現投影效果，投影能夠控制剪裁寬度和邊框寬度。

 

使用border-image實現的效果如圖7所示：

圖7  投影效果

 

border-image能夠說是CSS3中很是重要的部分，未來必定會大放光彩，其應用潛力真的很是驚人，惋惜目前支持的瀏覽器有限，僅FireFox，chrome瀏覽器，Safari3+支持。