邊框圖片
阿新 • • 發佈：2018-12-26
<style>
*{
padding: 0;
margin: 0;
}
div{
width: 200px;
height: 200px;
margin:100px auto;
box-sizing: border-box;
border: 27px solid red;
/*padding: 27px;*/
/*新增邊框圖片*/
/*border-image-source:可以指定邊框圖片的路徑,預設只是填充到容器的四個角點*/
border-image-source: url("images/img/border1.png");
/*讓它成為九宮格：
border-image-slice:設定四個方向上的裁切距離.fill:做內容的內部填充
問題：如果分別設定1，2，3，4個值代表什麼意思*/
border-image-slice: 27 fill;
/*border-image-width:邊框圖片的寬度。如果沒有設定這個屬性，那麼寬度預設就是元素的原始的邊框寬度。
細節：1.邊框圖片的本質是背景，並不會影響元素內容的放置 2.內容只會被容器的border和padding影響
建議：一般將值設定為原始的邊框的寬度*/
border-image-width: 27px;
/*border-image-outset:擴充套件邊框*/
border-image-outset: 0px;
/*border-image-repeat:
repeat:直接重複平鋪
round:將內容縮放進行完整的重複平鋪
設定背景平鋪效果 預設是stretch：拉伸*/
border-image-repeat: round;
/*縮寫：*/
/*border-image: source slice / width/outset repeat;*/
border-image: url("images/img/border1.png") 27 / 27px /0px round;
}
</style>
</head>
<body>
<div>邊框圖片的寬度。如果沒有設定這個屬性，那麼寬度預設就是元素的原始的邊框寬度</div>