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-边框图片的宽度。如果没有设置这个属性，那么宽度默认就是元素的原始的边框宽度。 18 细节：1.边框图片的本质是背景，并不会影响元素内容的放置 2.内容只会被容器的border和padding影响 19 建议：一般将值设置为原始的边框的宽度*/ 20 /*border-image- 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>