溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章給大家分享的是有關css中border-image-width屬性如何使用的內容。小編覺得挺實用的，因此分享給大家做個參考。一起跟隨小編過來看看吧。
css border-image-width屬性用于指定圖像邊界的寬度，可以設置4個值（不可為負值），把邊框圖像分割為九個部分。它們代表了從區域的上、右、下、左側向內的距離。
css border-image-width屬性怎么用？
border-image-width屬性規定圖像邊框的寬度。
語法：
border-image-width: number|%|auto;
屬性值：
number：表示相應的border-width 的倍數
%：邊界圖像區域的大小：橫向偏移的寬度的面積，垂直偏移的高度的面積
auto：如果指定了，寬度是相應的image-slice的內在寬度或高度。
注釋：
border-image-width 屬性的的4個值指定用于把邊框圖像分割為九個部分。它們代表了從區域的上、右、下、左側向內的距離。
如果忽略第四個值，則與第二個值相同。如果省略第三個值，則與第一個值相同。如果省略第二個值，則與第一個值相同。不允許任何負值作為 border-image-width 值。
css border-image-width屬性 示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
div {
border: 30px solid transparent;
border-image: url('https://img.php.cn/upload/article/000/000/024/5c62637b1a4fe853.png');
border-image-width: auto;
border-image-repeat: round;
border-image-slice: 30;
}
</style>
</head>
<body>
<div>DIV 使用圖像邊框</div>
<p>使用的圖片:</p>
<img src="https://img.php.cn/upload/article/000/000/024/5c62637b1a4fe853.png">
</body>
</html>效果圖：
感謝各位的閱讀！關于css中border-image-width屬性如何使用就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
