標題:
Box Model 設計-盒子(一)
[打印本頁]
作者:
陳育霖
時間:
2023-8-29 11:50
標題:
Box Model 設計-盒子(一)
本帖最後由 陳育霖 於 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; }
複製代碼
歡迎光臨 種子論壇 | 高雄市資訊培育協會學員討論區 (http://istak.org.tw/seed/)
Powered by Discuz! 7.2