Rumah >hujung hadapan web >Soal Jawab bahagian hadapan >css border-image-width属性怎么用
css border-image-width属性怎么用
- 青灯夜游asal
- 2019-05-30 16:43:493264semak imbas
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>效果图：
Atas ialah kandungan terperinci css border-image-width属性怎么用. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：css @keyframes规则怎么用Artikel seterusnya：css font-stretch属性怎么用