Heim > Artikel > Web-Frontend > So verwenden Sie das Border-Image-Slice-Attribut
So verwenden Sie das Border-Image-Slice-Attribut
- 青灯夜游Original
- 2019-02-12 14:48:094269Durchsuche
Das Attribut „border-image-slice“ wird verwendet, um den Versatz des Bildrandes nach innen (oben, rechts, unten, links) anzugeben. Es gibt keinen spezifischen Einheitswert, Sie müssen nur einen einfachen numerischen Wert angeben oder festlegen als Prozentsatz.
CSS3-Border-Image-Slice-Eigenschaft
Funktion: Gibt die an Bild Der nach innen versetzte obere, rechte, untere und linke Rand des Randbildes wird in 9 Bereiche geschnitten: 4 Ecken, 4 Seitenbereiche und einen Mittelteil, also ein 9-Quadrat-Raster.
Syntax:
border-image-slice: number|%|fill;
Zahl: Numerischer Wert, der das Pixel (wenn es sich um ein Rasterbild handelt) oder die Vektorkoordinate (wenn es sich um ein Vektorbild handelt) im darstellt Bild.
%: Prozentwert relativ zur Bildgröße: Die Breite des Bildes beeinflusst den horizontalen Versatz und die Höhe beeinflusst den vertikalen Versatz.
Füllen: Behalten Sie den mittleren Teil des Randbildes bei.
Hinweis: Sofern das Schlüsselwort „fill“ nicht verwendet wird, wird der mittlere Teil des Bildes verworfen. Wenn der vierte Wert/Prozentsatz weggelassen wird, ist er derselbe wie der zweite Wert. 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.
Beispiel für die Verwendung der CSS3-Eigenschaft „border-image-slice“:
Geben Sie den Innenversatz des Bildrandes an:
<!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-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 das Border-Image-Slice-Attribut" >
</body>
</html>Rendering:
Das obige ist der detaillierte Inhalt vonSo verwenden Sie das Border-Image-Slice-Attribut. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!