本帖最後由 陳育霖 於 2023-8-29 12:04 編輯
border-image-repeat: stretch 預設,延展圖片、repeat 重複顯示、round重複顯示+自動縮小
background-clip: border-box 顯示在邊框內、padding-box 顯示在內邊距內、content-box 顯示在內容之內- #box_image1 {
- margin: 50px;
- padding: 10px;
- border: 50px solid;
- text-align: center;
- border-image-source: url(borderfig.png);
- border-image-repeat: repeat;
- background: url(sky.avif);
- background-clip: content-box;
- border-image-slice: 30;
- }
- #box_image2 {
- margin: 50px;
- padding: 10px;
- border: 50px solid;
- text-align: center;
- border-image-source: url(borderfig.png);
- border-image-repeat: stretch;
- background: url(sky.avif) padding-box;
- border-image-slice: 30;
- }
複製代碼 盒子陰影 box-shadow
box-shadow: 水平值|垂直值|模糊範圍值|模糊擴散值|顏色|inset- #box1 { box-shadow: green 10px 10px; }
- #box2 { box-shadow: yellow 10px 10px 10px; }
- #box3 { box-shadow: red 10px 10px 10px 10 px; }
- #box4 { box-shadow: gray 10px 10px 10px inset; }
複製代碼 |