Box Model 設計-邊框(三)

陳育霖

圖片邊框 border-image
border-image-source: 圖片URL
border-slice: 長度|百分比
四個值：上、右、下、左
三個值：上、左右、下
兩個值：上下、左右
一個值：上下左右

1. #box_image{
   
2.     margin: 50px;
   
3.     padding: 10px;
   
4.     border: 50px solid;
   
5.     border-image-source: url(borderfig.png);
   
6.     border-image-slice: 50;
   
7. }

複製代碼

圖片寬度 border-image-width: 百分比|數值|auto
圖片邊框長度 border-image-outset: 百分比|數值

1. #box_image{
   
2.     margin: 50px;
   
3.     padding: 10px;
   
4.     border: 50px solid;
   
5.     border-image-width:
   
6.     border-image-source: url(borderfig.png);
   
7.     border-image-width: 100px;
   
8.     border-image-outset: 30px;
   
9. }

複製代碼