<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圖片邊框</title>
<style>
html,body,div{
margin: 0;
padding: 0;
}
#box{
width: 300px;
height: 300px;
background-color: pink;
/*border: 30px solid orange;*/
margin: 100px auto;
/*!*設(shè)置圖片邊框的圖片路徑*!*/
/*border-image-source: url("img/border.png");*/
/*!*設(shè)置圖片邊框的寬度 可以為1到4個(gè)值 和margin 相同*!*/
/*border-image-width: 20px 20px 20px 20px;*/
/*!*第一不拉伸區(qū)域的大小 點(diǎn)九圖 九宮格 可以為1到4個(gè)值 和margin 相同*!*/
/*border-image-slice: 26 26 26 26;*/
/*!*設(shè)置邊框圖片的重復(fù)樣式 stretch 拉伸(默認(rèn)的) repeat居中重復(fù)*!*/
/*!*round 擠一擠總會(huì)能方下的*!*/
/*border-image-repeat: round;*/
/*!*圖片邊框向外偏移的量 可以為1到4個(gè)值 和margin 相同*!*/
/*border-image-outset: 30px 30px 30px 30px;*/
/*復(fù)合屬性 第一個(gè)值為 source 第二個(gè)值 是slice 可以為1到4個(gè)值
第三個(gè)值 是 width 可以為1到4個(gè)值 第四個(gè)參數(shù)為 outset 可以為1到4個(gè)值 第五個(gè)參數(shù)為 repeat 二三四 重間必須加 "/" */
border-image: url("img/border.png") 26 26 26 26 / 20px 20px 20px 20px / 30px round;
}
</style>
</head>
<body>
<div id="box">
</div>
</body>
</html>
