注意点:
目前只有部分浏览器支持border-image属性;如果代码无误,内容却无法显示,可以尝试换个浏览器查看
图片边框的语法:
border-image:border-image-source border-image-slice border-image-repeat
三个参数 [图片地址;裁剪值;平铺方式]
border-image: url(img_fx/background.png) 100 stretch;
图片边框显示的重点:
边框属性不写边框大小,设了border-image会无法显示
三个参数[边框大小 样式 颜色]
border: 5px solid pink;
border-image参数讲解:
-
参数一、
图片地址,设置边框图片的url -
参数二、
裁剪 [有1-4个参数,上右下左顺时针裁剪]最常用的是1个参数
对边框图片裁四刀,使它变成一个九宫格图片
例如“30% 35% 40% 30%”裁剪,示意图如下:
- 参数三、
重复方式,有三种值;
round平铺、repeat重复、stretch拉伸[默认值]
帮助理解的边框图片
1、3、7、9是盲区;不会拉伸,不会重复,不会平铺
平铺和重复的区别:
平铺:为了完整的铺满,会改变单个元素大小
重复:不会改变大小,但为了铺满会切割部分来填补
不推荐使用repeat重复,可能会被切割,导致不美观
设置平铺边框图片:
实现以上效果的代码:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>平铺图片边框</title>
<style type="text/css">
.box {
height:170px;
width:170px;
float:left;
border:40px solid;
background-image:url(img_fx/h2.jpg);
margin:5px;
}
.b1 {
border-image:url(img_fx/border.png) 27 round;
}
.b2 {
border-image:url(img_fx/background.png) 100 round;
}
</style>
</head>
<body>
<div>
<div class="box b1"></div>
<div class="box b2"></div>
</div>
</body>
设置重复边框图片:
实现以上效果的代码:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>重复图片边框</title>
<style type="text/css">
.box {
height:170px;
width:170px;
float:left;
border:40px solid;
background-image:url(img_fx/h2.jpg);
margin:5px;
}
.b1 {
border-image:url(img_fx/border.png) 27 repeat;
}
.b2 {
border-image:url(img_fx/background.png) 100 repeat;
}
</style>
</head>
<body>
<div>
<div class="box b1"></div>
<div class="box b2"></div>
</div>
</body>
[默认参数]设置拉伸边框图片:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>拉伸图片边框</title>
<style type="text/css">
.box {
height:170px;
width:170px;
float:left;
border:40px solid;
background-image:url(img_fx/h2.jpg);
margin:5px;
}
.b1 {
border-image:url(img_fx/border.png) 27 stretch;
}
.b2 {
border-image:url(img_fx/background.png) 100 stretch;
}
</style>
</head>
<body>
<div>
<div class="box b1"></div>
<div class="box b2"></div>
</div>
</body>
总结 [如何设置图片边框]:
- 设置边框属性→ border
- 设置图片边框属性→border-image,根据边框图片大小设置对应的裁剪值
- 选择合适的重复方式
温馨提示:
喜欢灰碟分享的小伙伴不要忘记关注噢~这样子,想找我时就不会迷路啦*
联系方式:
Vx+:LHD7575