CSS3的边框（三）
2019獨角獸企業重金招聘Python工程師標準>>>
border-image有以下幾個重要的屬性需要了解一下：
round 會自動調整尺寸，完整顯示邊框圖片。
repeat 單純平鋪多余部分，會被“裁切”而不顯示。
<!DOCTYPE html>
<html>
<head>
<style>
div
{
border:15px solid transparent;
width:300px;
padding:10px 20px;
}
?
#round
{
-moz-border-image:url(/i/border.png) 30 30 round; /* Old Firefox */
-webkit-border-image:url(/i/border.png) 30 30 round; /* Safari and Chrome */
-o-border-image:url(/i/border.png) 30 30 round; /* Opera */
border-image:url(/i/border.png) 30 30 round;
}
?
#stretch
{
-moz-border-image:url(/i/border.png) 30 30 stretch; /* Old Firefox */
-webkit-border-image:url(/i/border.png) 30 30 stretch; /* Safari and Chrome */
-o-border-image:url(/i/border.png) 30 30 stretch; /* Opera */
border-image:url(/i/border.png) 30 30 stretch;
}
</style>
</head>
<body>
?
<div id="round">在這里，圖片鋪滿整個邊框。</div>
<br>
<div id="stretch">在這里，圖片被拉伸以填充該區域。</div>
?
<p>這是我們使用的圖片：</p>
<img src="/i/border.png">
?
</body>
</html>
運行結果：
轉載于:https://my.oschina.net/u/2971691/blog/865221
創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎總結
以上是生活随笔為你收集整理的CSS3的边框（三）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 64gb够用吗
- 下一篇： ?Web开发者需要知道的CSS Tric