返回列表 發帖

Box Model 設計-盒子(一)

本帖最後由 陳育霖 於 2023-8-29 12:04 編輯

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; }
複製代碼

返回列表