2019獨角獸企業重金招聘Python工程師標準>>>

二、邊框圖片

邊框圖片border-image屬性，是用來給元素邊框添加背景圖像，在某些時候，利用這個?border-image?可以輕松繪制一些比較復雜的小部件。border-image只是一個簡寫屬性，，用于設置以下屬性：

??border-image-source

??border-image-slice

??border-image-width

??border-image-outset

border-image-repeat?

Internet Explorer 不支持 border-image 屬性。

border-image 屬性規定了用作邊框的圖片。為了實現瀏覽器的兼容，在使用border-image屬性時寫法通常如下：

div

{

-webkit-border-image:url(border.png) 30 30 round;?/* Safari 5 */

-o-border-image:url(border.png) 30 30 round;?/* Opera */

border-image:url(border.png) 30 30 round;

}

設置的圖片將會被“切割”成九宮格形式，然后進行設置。如下圖

“切割”完成后生成虛擬的9塊圖形，然后按對應位置設置背景，

其中四個角位置、形狀保持不變，中心位置水平垂直兩個方向平鋪。如下圖

?

?

轉載于:https://my.oschina.net/u/2971691/blog/865206

總結

以上是生活随笔為你收集整理的CSS3的边框（二）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。