Heim >Web-Frontend >Front-End-Fragen und Antworten >So verwenden Sie die CSS-Eigenschaft „border-image-width'.
So verwenden Sie die CSS-Eigenschaft „border-image-width'.
- 青灯夜游Original
- 2019-05-30 16:43:493265Durchsuche
Das CSS-Attribut „border-image-width“ wird verwendet, um die Breite des Bildrandes anzugeben. Sie können 4 Werte (nicht negativ) festlegen, um das Randbild in neun Teile zu unterteilen. Sie repräsentieren Abstände nach innen vom oberen, rechten, unteren und linken Rand des Bereichs.
Wie verwende ich die CSS-Eigenschaft „border-image-width“?
Das Attribut „border-image-width“ gibt die Breite des Bildrandes an.
Syntax:
border-image-width: number|%|auto;
Attributwert:
Zahl: Stellt das Vielfache der entsprechenden Rahmenbreite
dar%: Die Größe des umgrenzenden Bildbereichs: Der Bereich des horizontalen Breitenversatzes, der Bereich des vertikalen Höhenversatzes
Auto: Wenn angegeben, ist die Breite die intrinsische Breite oder Höhe des entsprechenden Bildausschnitts.
Hinweis:
Die 4 Werte des Attributs border-image-width werden angegeben, um das Randbild in neun Teile zu unterteilen. Sie repräsentieren Abstände nach innen vom oberen, rechten, unteren und linken Rand des Bereichs.
Entspricht dem zweiten Wert, wenn der vierte Wert weggelassen wird. Wenn der dritte Wert weggelassen wird, ist er derselbe wie der erste Wert. Wenn der zweite Wert weggelassen wird, ist er derselbe wie der erste Wert. Als border-image-width-Werte sind keine negativen Werte zulässig.
CSS-Border-Image-Width-Eigenschaftsbeispiel
<!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="So verwenden Sie die CSS-Eigenschaft „border-image-width'." >
</body>
</html>Rendering:
Das obige ist der detaillierte Inhalt vonSo verwenden Sie die CSS-Eigenschaft „border-image-width'.. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!