邊框影像延伸設計(預設)

 

參考: http://www.runoob.com/css3/css3-borders.html

 

border-image: url(border.png) 30 30 stretch;
background-clip: border-box;

邊框影像重複顯示

背景內容(顏色)去邊框部份

 

參考: https://www.w3schools.com/css/ css3_border_images.asp

 

border-image: url(border.png) 30 30 round;
background-clip: padding-box;

邊框影像重複顯示

背景內容(顏色)去邊框及內邊界的部份

 

border-image: url(border.png) 30 30 round;
background-clip: content-box;

border-image: url(border3.png) 30 30 round;
background-clip: padding-box;

border-image: url(border4.png) 15 15 stretch;
background-clip: padding-box;

border-image: url(border5.png) 20 20 stretch;
background-clip: padding-box;