1.邊框圖片詳解
1 <style> 2 *{ 3 padding: 0; 4 margin: 0; 5 } 6 div{ 7 width: 900px; 8 height: 900px; 9 margin: 100px auto; 10 border: 133px solid red; 11 /*padding: 133px;*/ 12 /*添加邊框圖片*/ 13 /*border-image-source:可以指定邊框圖片的路徑，默認只是填充到容器四個角*/ 14 /*border-image-source: url("../img/border2.jpg");*/ 15 /*讓他成為九宮格：border-image-slice：設置四個方向的裁切距離。fill：做內容部分的填充*/ 16 /*border-image-slice: 133 fill;*/ 17 /*border-image-width:邊框圖片的寬度。如果沒有設置這個屬性，那么寬度默認就是元素的原始的邊框寬度。 18 細節：1.邊框圖片的本質是背景，並不會影響元素內容的放置 2.內容只會被容器的border和padding影響 19 建議：一般將值設置為原始的邊框的寬度*/ 20 /*border-image-width: 133px;*/ 21 /*border-image-outset:擴展邊框---一般不會用*/ 22 /*border-image-outset: 0px;*/ 23 /*border-image-repeat: 24 repeat:直接重復平鋪 25 round：將內容縮放進行完整的重復平鋪*/ 26 /*border-image-repeat: round;*/ 27 28 /*縮寫*/ 29 /*border-image: source slice / width / outset repeat;*/ 30 border-image: url("../img/border2.jpg") 133 / 133px / 0px round; 31 } 32 </style>
2.邊框圖片小案例
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 *{ 8 padding: 0; 9 margin: 0; 10 } 11 div{ 12 width: 1200px; 13 height: auto; 14 border: 20px solid red; 15 border-image-source: url("../img/border3.jpg"); 16 border-image-slice: 20 fill; 17 border-image-width: 20px; 18 border-image-repeat: stretch; 19 20 } 21 </style> 22 </head> 23 <body> 24 <div>邊框圖片的四個角是不會拉伸的，不管盒子的大小，寬高如何變化，背景圖片都都會填充滿整個盒子。切四個角不會變化 25 邊框圖片的四個角是不會拉伸的，不管盒子的大小，寬高如何變化，背景圖片都都會填充滿整個盒子。切四個角不會變化 26 邊框圖片的四個角是不會拉伸的，不管盒子的大小，寬高如何變化，背景圖片都都會填充滿整個盒子。切四個角不會變化 27 邊框圖片的四個角是不會拉伸的，不管盒子的大小，寬高如何變化，背景圖片都都會填充滿整個盒子。切四個角不會變化 28 邊框圖片的四個角是不會拉伸的，不管盒子的大小，寬高如何變化，背景圖片都都會填充滿整個盒子。切四個角不會變化 29 邊框圖片的四個角是不會拉伸的，不管盒子的大小，寬高如何變化，背景圖片都都會填充滿整個盒子。切四個角不會變化 30 邊框圖片的四個角是不會拉伸的，不管盒子的大小，寬高如何變化，背景圖片都都會填充滿整個盒子。切四個角不會變化 31 邊框圖片的四個角是不會拉伸的，不管盒子的大小，寬高如何變化，背景圖片都都會填充滿整個盒子。切四個角不會變化 32 邊框圖片的四個角是不會拉伸的，不管盒子的大小，寬高如何變化，背景圖片都都會填充滿整個盒子。切四個角不會變化</div> 33 </body> 34 </html>