1、边框背景概述
1.1 border-image-source
border-image-source属性指定要使用的图像，而不是由border-style属性设置的边框样式。如果值是"none"，或者，如果无法显示图像，边框样式会被使用。
1.2 border-image-slice
border-image -slice属性指定图像的边界向内偏移。
| 值 | 说明 |
|---|---|
| number | 数字表示图像的像素（位图图像）或向量的坐标（如果图像是矢量图像） |
| % | 百分比图像的大小是相对的：水平偏移图像的宽度，垂直偏移图像的高度 |
| fill | 保留图像的中间部分 |
1.3 border-image-repeat
| 值 | 描述 |
|---|---|
| stretch | 默认值。拉伸图像来填充区域 |
| repeat | 平铺（repeated）图像来填充区域。 |
| round | 类似 repeat 值。如果无法完整平铺所有图像，则对图像进行缩放以适应区域。 |
1.4 border-image-width
border-image-width 属性的四个之规定将边框图像分割为九个部分的偏移。它们代表了从区域的上、右、下、左侧向内的距离。如果忽略第四个值，则与第二个值相同。如果省略第三个值，则与第一个值相同。如果省略第二个值，则与第一个值相同。不允许任何负值作为 border-image-width 值。
| 值 | 描述 |
|---|---|
| length | 距离多少像素 |
| percentage | 百分比 |
| number | 边框宽度多少倍数 |
1.5 border-image-outset
border-image-outset 属性规定边框图像超出边框盒的量。在上、右、下、左侧。如果忽略第四个值，则与第二个值相同。如果省略第三个值，则与第一个值相同。如果省略第二个值，则与第一个值相同。不允许任何负值作为 border-image-outset 值。
| 值 | 描述 |
|---|---|
| length | 距离多少像素 |
| percentage | 百分比 |
| number | 边框宽度多少倍数 |
2、背景裁剪
border-image-slice ：上、右、下、左。
边框背景图剪裁
3、边框背景重复效果
源代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>边框背景重复效果</title>
<style type="text/css">
.borderImage{
width:400px;
height:100px;
border: 27px double orange;
border-image-source:url(border.png);
border-image-slice: 27 27 27 27;
border-image-width: 27px;
border-image-repeat: stretch;
}
.borderImageRepeat{
margin-top: 50px;
width:400px;
height:100px;
border: 27px double orange;
border-image-source:url(border.png);
border-image-slice: 27 27 27 27;
border-image-width: 27px;
border-image-repeat: repeat;
}
.borderImageRound{
margin-top: 50px;
width:400px;
height:100px;
border: 27px double orange;
border-image-source:url(border.png);
border-image-slice: 27 27 27 27;
border-image-width: 27px;
border-image-repeat: round;
}
</style>
</head>
<body>
<div class="borderImage">border-image-repeat: stretch;</div>
<div class="borderImageRepeat">
border-image-repeat: repeat;<br>
repeat简单粗暴，会有不完整的情况。
</div>
<div class="borderImageRound">
border-image-repeat: repeat;<br>
round会拉伸压缩比repeat效果好。
</div>
</body>
</html>
运行效果:
背景图重复
网友评论