溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要為大家詳細介紹了css中border-image屬性的用法，圖文詳解容易學習，配合代碼閱讀理解效果更佳，非常適合初學者入門，感興趣的小伙伴們可以參考一下。
border-image屬性是一個簡寫屬性，設置所有 border-image-* 屬性。如果省略值，會設置其默認值。
語法：
border-image: source slice width outset repeat|initial|inherit;
屬性值：
● border-image-source：用于指定要用于繪制邊框的圖像的位置
● border-image-slice：圖像邊界向內偏移
● border-image-width：圖像邊界的寬度
● border-image-outset：用于指定在邊框外部繪制 border-image-area 的量
● border-image-repeat：用于設置圖像邊界是否應重復（repeat）、拉伸（stretch）或鋪滿（round）。
注：
Internet Explorer 10 及更早的版本不支持 border-image 屬性。Internet Explorer 11, Firefox, Opera 15, Chrome 以及 Safari 6 支持 border-image 屬性。Safari 5 支持替代的 -webkit-border-image 屬性。
說明：請使用 border-image-* 屬性來構造漂亮的可伸縮按鈕！
css border-image屬性 示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#borderimg1 {
border: 10px solid transparent;
padding: 15px;
-webkit-border-image: url(border.png) 30 round; /* Safari 3.1-5 */
-o-border-image: url(border.png) 30 round; /* Opera 11-12.1 */
border-image: url(border.png) 30 round;
}
#borderimg2 {
border: 10px solid transparent;
padding: 15px;
-webkit-border-image: url(border.png) 30 stretch; /* Safari 3.1-5 */
-o-border-image: url(border.png) 30 stretch; /* Opera 11-12.1 */
border-image: url(border.png) 30 stretch;
}
</style>
</head>
<body>
<p>border-image 屬性用于指定一個元素的邊框圖像。</p>
<p id="borderimg1">在這里，圖像平鋪（重復），以填補該地區。</p>
<p id="borderimg2">在這里，圖像被拉伸以填補該地區</p>
<p>這是原始圖片:</p><img src="/images/border.png">
<p><b>注意:</b> Internet Explorer 10 及更早的版本不支持 border-image 屬性。</p>
</body>
</html>效果圖：
看完上述內容，你們對border-image屬性大概了解了嗎？如果想了解更多相關文章內容，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
