<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div
{
width: 400px;
height: 300px;
margin: 50px;
border-style: solid;
border-width: 27px;
}
.box1
{
border-image: url(./2.jpg) 27 repeat;
/*因为四个角不变，为什么不变，设计的盲点把，27代表黄色的部分裁剪为27，重复平铺开，记住，平铺到什么地步，到宽度为400px的时候就停下来了，高度是平铺到300px的时候就完事了呀，并且记住那里面是不要px的，写px会出错的啊，为什么，因为设计就是这样的啊，不信吗，你试试。。。*/
/*并且·记住，要先在所在的父级元素中设置border-style:solid;
border-width:27px;width: 400px;
height: 300px;
margin:50px;why？
因为不设置代表高度宽度代表不知道平铺拉伸多少重复多少，border-style:solid;
border-width:27px;意思是要以线方式来做，边框的宽度代表边框的宽为27px哈，27代表裁剪哈，然后平铺重复展开来*/
}
.box2
{
border-image: url(./2.jpg) 27 stretch stretch;
/*这里是宽度27上下左右，上下拉伸，左右也是拉伸*/
}
.box3
{
border-image: url(./2.jpg) 27 stretch repeat;
/*代表上下拉伸，左右重复，都裁剪为27，兄弟，简单？*/
}
.box4
{
border-image: url(./4.jpg) 10 repeat repeat;
}
.box5
{
border-image: url(./4.jpg) 27 repeat stretch;
}
.box6
{
border-image-source: url(./4.jpg);
border-image-slice:30;
border-image-width: 27px;
border-image-outset: 20px;
border-image-repeat: space;
/*1：最后一个的意思是资源为哪一个路径？
2：裁剪多少
3：边框的宽度多少？
4：意思是超出400px并且高度300多少？相当于400+20，300+20把
5：space：类似于rpeat，可以做好正好适应所在的父级的宽高
width: 400px;
height: 300px;
*/
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
<div class="box6"></div>
<div class="box7"></div>
<div class="box8"></div>
<div class="box9"></div>
<div class="box10"></div>
</body>
</html>
我发这张图片进去把，方便引用
记住哈，核心来了，兄弟们，四个角那里是不会有效果，算是border-image的盲点把
而黄色部分是有效果的哈，边框将border-image分成了九部分：border-top-image , border-right-image , border-bottom-image , border-left-image, border-top-left-image , border-top-right-image , border-bottom-left-image , border-bottom-right-image以及中间的内容区域，，
原创文章 107
获赞 14
访问量 1349