Box Model 設計-盒子(一)

陳育霖

border-image-repeat: stretch 預設，延展圖片、repeat 重複顯示、round重複顯示+自動縮小
background-clip: border-box 顯示在邊框內、padding-box 顯示在內邊距內、content-box 顯示在內容之內

1. #box_image1 {
   
2.     margin: 50px;
   
3.     padding: 10px;
   
4.     border: 50px solid;
   
5.     text-align: center;
   
6.     border-image-source: url(borderfig.png);
   
7.     border-image-repeat: repeat;
   
8.     background: url(sky.avif);
   
9.     background-clip: content-box;
   
10.     border-image-slice: 30;
    
11. }
    
12. #box_image2 {
    
13.     margin: 50px;
    
14.     padding: 10px;
    
15.     border: 50px solid;
    
16.     text-align: center;
    
17.     border-image-source: url(borderfig.png);
    
18.     border-image-repeat: stretch;
    
19.     background: url(sky.avif) padding-box;
    
20.     border-image-slice: 30;
    
21. }

複製代碼

盒子陰影 box-shadow
box-shadow: 水平值|垂直值|模糊範圍值|模糊擴散值|顏色|inset

1. #box1 { box-shadow: green 10px 10px; }
   
2. #box2 { box-shadow: yellow 10px 10px 10px; }
   
3. #box3 { box-shadow: red 10px 10px 10px 10 px; }
   
4. #box4 { box-shadow: gray 10px 10px 10px inset; }

複製代碼