suchen

Heim >Web-Frontend >Front-End-Fragen und Antworten >So verwenden Sie die CSS-Eigenschaft „Border-Image-Slice'.

So verwenden Sie die CSS-Eigenschaft „Border-Image-Slice'.

青灯夜游
青灯夜游Original
2019-05-30 11:26:432965Durchsuche

Die CSS-Eigenschaft „border-image-slice“ wird verwendet, um den Innenversatz des Bildrandes anzugeben (oben, rechts, unten, links). Das Bild wird in neun Bereiche unterteilt: vier Ecken, vier Seiten und einen mittleren Bereich . Sofern das Schlüsselwort „fill“ nicht verwendet wird, wird der mittlere Teil des Bildes verworfen.

So verwenden Sie die CSS-Eigenschaft „Border-Image-Slice'.

Wie verwende ich das CSS-Attribut „border-image-slice“? Das Attribut

border-image-slice gibt den Innenversatz des Bildrandes an.

Syntax: 

border-image-slice: number|%|fill;

Attributwert:

● Zahl: Numerischer Wert, der die Pixel im Bild darstellt (falls es handelt sich um ein Rasterbild) oder Vektorkoordinaten (im Fall eines Vektorbildes).​  

●　%: 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:

Dieses Attribut gibt den Innenversatz der oberen, rechten, unteren und linken Bildränder an: vier Ecken, vier Seiten und einen Mittelbereich. 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.

CSS-Border-Image-Slice-Eigenschaftsbeispiel

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style> 
div {
    border: 30px solid transparent;
    border-image: url(&#39;https://img.php.cn/upload/article/000/000/024/5c62637b1a4fe853.png&#39;);
    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>

So verwenden Sie die CSS-Eigenschaft „Border-Image-Slice'.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie die CSS-Eigenschaft „Border-Image-Slice'.. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

css number border
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：So verwenden Sie die CSS-TextschatteneigenschaftNächster Artikel：So verwenden Sie die CSS-Textschatteneigenschaft

In Verbindung stehende Artikel

Mehr sehen