2019獨角獸企業(yè)重金招聘Python工程師標(biāo)準(zhǔn)>>>

二、邊框圖片

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

??border-image-source

??border-image-slice

??border-image-width

??border-image-outset

border-image-repeat?

Internet Explorer 不支持 border-image 屬性。

border-image 屬性規(guī)定了用作邊框的圖片。為了實現(xiàn)瀏覽器的兼容，在使用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;

}

設(shè)置的圖片將會被“切割”成九宮格形式，然后進(jìn)行設(shè)置。如下圖

“切割”完成后生成虛擬的9塊圖形，然后按對應(yīng)位置設(shè)置背景，

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

?

?

轉(zhuǎn)載于:https://my.oschina.net/u/2971691/blog/865206

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。