<style>
*{
padding: 0;
margin: 0;
}
div{
200px;
height: 200px;
margin:100px auto;
box-sizing: border-box;
border: 27px solid red;
/*padding: 27px;*/
/*添加边框图片*/
/*border-image-source:可以指定边框图片的路径,默认只是填充到容器的四个角点*/
border-image-source: url("images/img/border1.png");
/*让它成为九宫格：
border-image-slice:设置四个方向上的裁切距离.fill:做内容的内部填充
问题：如果分别设置1，2，3，4个值代表什么意思*/
border-image-slice: 27 fill;
/*border-image-边框图片的宽度。如果没有设置这个属性，那么宽度默认就是元素的原始的边框宽度。
细节：1.边框图片的本质是背景，并不会影响元素内容的放置 2.内容只会被容器的border和padding影响
建议：一般将值设置为原始的边框的宽度*/
border-image- 27px;
/*border-image-outset:扩展边框*/
border-image-outset: 0px;
/*border-image-repeat:
repeat:直接重复平铺
round:将内容缩放进行完整的重复平铺
设置背景平铺效果 默认是stretch：拉伸*/
border-image-repeat: round;
/*缩写：*/
/*border-image: source slice / width/outset repeat;*/
border-image: url("images/img/border1.png") 27 / 27px /0px round;
}
</style>
</head>
<body>
<div>边框图片的宽度。如果没有设置这个属性，那么宽度默认就是元素的原始的边框宽度</div>