CSS3 - 边框图片
2019-03-11 本文已影响0人
Hyso
border-image-source 属于设置指定图片为元素边框。
border-image-slice 属性设置图片从上往下、从右往左，从下往上，从左往右的偏移，不带单位。
boreder-image-repeat 属性设置当边框图片大小比元素大小小时，如何填充的平铺方式。默认为拉伸（stretch），还可设置为：平铺（repeat）、对图像进行缩放以适应区域（round）。
代码示例
当只设置 border-image 属性时，将把元素的四个角设置为图片。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box {
width: 328px;
height: 273px;
margin: 100px 100px;
border: 1px solid #CCCCCC;
border-image-source: url(2.jpg);
background-color: yellow;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
运行结果
已放大至200%
上图中，元素四个角上的小黑点其实就是设置的边框图片。若想把图片设置到整个边框上，则还需要设置 border-image-slice 属性，将图片切成一个九宫格。
代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box {
width: 328px;
height: 273px;
margin: 100px 100px;
border: 1px solid #CCCCCC;
border-image-source: url(2.jpg);
border-image-slice: 42 26 42 26;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
代码分析
border-image-slice: 42 26 42 26;
从图片上边往下移动42像素
从图片右边往左移动26像素
从图片下边往上移动42像素
从图片左边往右移动26像素
运行结果
已放大至200%
由于在代码中将图片边框设置成了1px，因此无法看出图片边框的效果，所以需将元素的上右下左四个边框设置为 border-image-slice 属性的四个值，并上下左右一一对应。
代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.box {
width: 328px;
height: 273px;
margin: 100px 100px;
border-top: 42px solid #CCCCCC;
border-right: 26px solid #CCCCCC;
border-bottom: 42px solid #CCCCCC;
border-left: 26px solid #CCCCCC;
border-image-source: url(2.jpg);
border-image-slice: 42 26 42 26;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
运行结果
