溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
今天小編給大家分享的是如何使用css中border-image-repeat屬性，相信大部分人都還沒學會這個技能，為了讓大家更加了解，給大家總結了以下內容，話不多說，一起往下看吧。
css border-image-repeat屬性用于指定圖像邊框是否應被重復（repeated）、拉伸（stretched）或鋪滿（rounded）。該屬性規定如何延展和鋪排邊框圖像的邊緣和中間部分。因此，您可以規定兩個值。如果省略第二個值，則采取與第一個值相同的值。
css border-image-repeat屬性怎么用？
border-image-repeat屬性規定圖像邊框是否應該被重復（repeated）、拉伸（stretched）或鋪滿（rounded）。
語法：
border-image-repeat: stretch|repeat|round|space;
屬性值：
● stretch：拉伸圖像來填充區域
● repeat：平鋪（重復）圖像來填充區域。
● round：類似 repeat 值。如果無法完整平鋪所有圖像，則對圖像進行縮放以適應區域。
● space：類似 repeat 值。如果無法完整平鋪所有圖像，擴展空間會分布在圖像周圍
說明：該屬性規定如何延展和鋪排邊框圖像的邊緣和中間部分。因此，您可以規定兩個值。如果省略第二個值，則采取與第一個值相同的值。
注：Internet Explorer 10, Opera 12, 和 Safari 5 不支持 border-image-repeat 屬性。
css border-image-repeat屬性 示例
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: lightgrey;
border: 30px solid transparent;
border-image: url('border.png');
border-image-slice: 30;
border-image-repeat: repeat;
}
</style>
</head>
<body>
<div>
DIV 使用圖像邊框。
</div>
<p>使用的圖片:</p>
<img src="border.png">
</body>
</html>效果圖：
關于如何使用css中border-image-repeat屬性就分享到這里了，希望以上內容可以對大家有一定的參考價值，可以學以致用。如果喜歡本篇文章，不妨把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
