H5C3--邊框圖片

相似於android的.9圖片，目的是爲了防止圖片由於內容的擴展而致使圖片拉伸失真。html

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7  div{
 8  width: 200px;
 9  height: 300px;
10  border: 1px solid #000;
11  box-sizing: border-box;
12  padding: 26px;
13             
14             /*添加邊框圖片*/
15             /*border-image-source: url("../images/border1.png"); 16  !*設置裁切區域*! 17  border-image-slice: 27; 18  !*邊框的寬度默認寬度等於當前元素的邊框寬度 19  注意：邊框圖片至關於背景，並不會對容器的內容區域的大小產生任何的影響，因此可能會形成內容與邊框圖片的重疊*! 20  border-image-width: 27px; 21  !*設置邊框圖利的拉伸和平鋪*! 22  border-image-repeat: round; 23  !*設置邊框的擴展*! 24  border-image-outset: 0px;*/
25 
26             /*簡寫：border-image:source slice / width / outset repeat*/
27  border-image: url("../images/border1.png") 27 / 27px round;
28         }
29     </style>
30 </head>
31 <body>
32 <div>邊框的寬度默認寬度等於當前元素的邊框寬度邊框的寬度默認寬度等於當前元素的邊框寬度</div>
33 </body>
34 </html>

實例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style> div{ width: 300px; border: 1px solid #ccc; padding:10px; border-image-source: url("../images/btn_bg.png");
            /*fill:填充中間區域*/ border-image-slice: 10 fill; border-image-width: 10px;
        }
    </style>
</head>
<body>
<div>注意：邊框圖片至關於背景，並不會對容器的內容區域的大小產生任何的影響，因此可能會形成內容與邊框圖片的重注意： 邊框圖片至關於背景，並不會對容器的內容區域的大小產生任何的影響，因此可能會形成內容與邊框圖片的重疊注意： 邊框圖片至關於背景，並不會對容器的內容區域的大小產生任何的影響，因此可能會形成內容與邊框圖片的重疊注意： 邊框圖片至關於背景，並不會對容器的內容區域的大小產生任何的影響，因此可能會形成內容與邊框圖片的重疊注意 ：邊框圖片至關於背景，並不會對容器的內容區域的大小產生任何的影響，因此可能會形成內容與邊框圖片的重疊注意： 邊框圖片至關於背景，並不會對容器的內容區域的大小產生任何的影響，因此可能會形成內容與邊框圖片的重疊注意： 邊框圖片至關於背景，並不會對容器的內容區域的大小產生任何的影響，因此可能會形成內容與邊框圖片的重疊疊</div>
</body>
</html>