css border-image-width屬性怎麼用
- 青灯夜游原創
- 2019-05-30 16:43:493225瀏覽
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" alt="css border-image-width屬性怎麼用" >
</body>
</html>效果圖：
##
以上是css border-image-width屬性怎麼用的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn