border-image屬性把邊框的背景設置為圖片


一、瀏覽器對它的支持
Firefox3.5-Firefox15     需要加-moz-前綴
Firefox15以上              同樣支持-moz-前綴的css代碼,但是必須在css代碼中加入border-style:solid;否則不會看到效果。
Chrome1.1.x以上         需要加前綴-webkit-
Safari3.1以上               需要加前綴-webkit-
Opera瀏覽器               需要加前綴-o-
較新版本的Chrome,Firefox及Webkit內核的opera   支持w3標准,可以不加前綴。
IE瀏覽器                     支持效果不好,IE11可以支持。


二、border-image的參數
border-image-source:url('')  圖片的路徑
border-image-slice     圖片的裁切方式,4個參數可以是像素值,也可以是百分比。順序為上,右,下,左。
border-image-width   邊框的寬度, 順序為上,右,下,左。
border-image-outset  邊框偏移基准位置的像素值,默認為0,
border-image-repeat  裁切后圖片的填充方式,可選stretch/repeat/round,分別為拉伸,重復,平鋪,默認值為stretch,順序為:上下,左右。

三、對參數進行解析
border-image-slice     圖片的裁切方式,4個參數可以是像素值,也可以是百分比。順序為上,右,下,左。
border-image-slice:33% 33% 33% 33%或則border-image-slice:33%。
把一張圖片進行切割,按照上面的百分比來切割。通過上面的四個百分比可以把一張圖片切割成9部分,然后把其中外部的八部分按照填充方式進行填充到邊框上的相應位置。如果邊框有一定的寬度,那么四條邊和與之包含的內容的組合也是一個九宮格。

 

border-image-outset:50px
表示圖片填充的外部邊緣距離元素邊框為50px.如果邊框的寬度小於border-image-outset的值,那么元素與圖像填充之間會有(border-image-outset的值減去邊框寬度)大的間隙。


border-image-repeat:把圖片按照上面裁切的方式裁切之后,每部分的小圖片就要按照對應的邊框區域填充。在填充時,圖片的四個角的圖片不會改變。其余的圖片會隨着
border-image-repeat設定的填充方式來改變。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM