一、定义：
- 在内容变化的容器里使用，边框自动填充，由于浏览器的兼容问题，没有广泛使用
-
border-image属性是速记属性用于设置 border-image-source, border-image-slice, border-image-width, border-image-outset 和border-image-repeat 的值。例如：border-image：url（“1.png”） 167/20px round
二、用法
①border-image-source属性指定要使用的图像，而不是由border-style属性设置的边框样式。 如果值是"none"，或者，如果无法显示图像，边框样式会被使用。
②border-image -slice属性指定图像的边界向内偏移。此属性指定顶部，右，底部，左边缘的图像向内偏移，分为九个区域：四个角，四边和中间。值默认的单位是px，不能使用小数
③border-image -width属性指定图像边界的宽度。
④border-image-outset用于指定在边框外部绘制 border-image-area 的量，设置边框图像与边框（border-image）的距离，默认为0
⑤ border-image-repeat 属性用于图像边界是否应重复（repeated：从边框的中间向两侧平铺，但不完整）、拉伸（stretched：拉伸显示在边框内，会变形）或铺满（rounded：完整的自适应显示在边框内，等比缩放，不会变形）。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>边框图片</title> <style> .box1{ width: 400px; height: 400px; float: left; border: 20px solid #000;/* 必须先设置 */ border-image: url("border.png") 26/20px stretch; } .box2{ width: 400px; height: 400px; float: left; border: 20px solid #000;/* 必须先设置 */ border-image: url("border.png") 26/20px round; } .box3{ width: 400px; height: 400px; float: left; border: 20px solid #000;/* 必须先设置 */ border-image: url("border.png") 26/20px repeat; } </style> </head> <body> <div class="box1">stretch(默认值)</div> <div class="box2">round</div> <div class="box3">repeat</div> </body> </html>
