1、邊框背景概述
1.1 border-image-source
border-image-source屬性指定要使用的圖像，而不是由border-style屬性設置的邊框樣式。如果值是"none"，或者，如果無法顯示圖像，邊框樣式會被使用。
1.2 border-image-slice
border-image -slice屬性指定圖像的邊界向內(nèi)偏移。
| 值 | 說明 |
|---|---|
| number | 數(shù)字表示圖像的像素（位圖圖像）或向量的坐標（如果圖像是矢量圖像） |
| % | 百分比圖像的大小是相對的：水平偏移圖像的寬度，垂直偏移圖像的高度 |
| fill | 保留圖像的中間部分 |
1.3 border-image-repeat
| 值 | 描述 |
|---|---|
| stretch | 默認值。拉伸圖像來填充區(qū)域 |
| repeat | 平鋪（repeated）圖像來填充區(qū)域。 |
| round | 類似 repeat 值。如果無法完整平鋪所有圖像，則對圖像進行縮放以適應區(qū)域。 |
1.4 border-image-width
border-image-width 屬性的四個之規(guī)定將邊框圖像分割為九個部分的偏移。它們代表了從區(qū)域的上、右、下、左側向內(nèi)的距離。如果忽略第四個值，則與第二個值相同。如果省略第三個值，則與第一個值相同。如果省略第二個值，則與第一個值相同。不允許任何負值作為 border-image-width 值。
| 值 | 描述 |
|---|---|
| length | 距離多少像素 |
| percentage | 百分比 |
| number | 邊框?qū)挾榷嗌俦稊?shù) |
1.5 border-image-outset
border-image-outset 屬性規(guī)定邊框圖像超出邊框盒的量。在上、右、下、左側。如果忽略第四個值，則與第二個值相同。如果省略第三個值，則與第一個值相同。如果省略第二個值，則與第一個值相同。不允許任何負值作為 border-image-outset 值。
| 值 | 描述 |
|---|---|
| length | 距離多少像素 |
| percentage | 百分比 |
| number | 邊框?qū)挾榷嗌俦稊?shù) |
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>
運行效果:
背景圖重復
