border-image-width in css

So erklärt MDN border-image-width.border-image-width in css

Die CSS-Eigenschaft border-image-width definiert die Breite des Rahmens , indem nach innen gerichtete Offsets von den Randkanten definiert werden. Wenn die Randbildbreite größer als die Rahmenbreite ist, erstreckt sich der Rahmen über die Füll- (und/oder Inhalts-) Kante hinaus.

Was es nicht sagt ist, was passiert, wenn Rand-Bild-Breite ist kleiner als Rand-Breite?

Ich habe ein Beispiel dafür gemacht. Hier lief es auf Chrom 56 ist der Code:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Border Image</title> 
    <style> 
     p.checkBorderImageWidth{ 
      border: 40px solid black; 
      width:500px; 
      border-image-source: url("1.png"); 
      /* Note that now border-image-slice defaults to 100% */ 
      border-image-width: 10px; 
      outline: 1px solid black; 
     } 

    </style> 
</head> 

<body> 
    <p class="checkBorderImageWidth">Hi this is just a demo</p> 
</body> 

</html>

Border Bild verwendet wird:

Ergebnis ist:

So, wie Sie das sehen Der schwarze Rand ist versteckt, obwohl es 40px und die Boder-Bildbreite 10px beträgt. Kann mir das jemand erklären?

Quelle

2017-02-16 Breaking Benjamin

Das ist Grenze Bild statt der ‚normalen‘ Grenze verwendet:

Quelle: https://www.w3schools.com/cssref/css3_pr_border-image.asp

Die border-image Eigenschaft Sie ein Bild angeben können, um statt der normalen Grenze verwendet werden ein Element.

Ihr Zitat erklärt, dass die Randbild der Polsterung abdeckt und schließlich Inhalt des Behälters, wenn border-image-width > border-width.

Zum Beispiel:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Border Image</title> 
    <style> 
     p.checkBorderImageWidth{ 
      border: 40px solid black; 
      width:500px; 
      border-image-source: url("1.png"); 
      /* Note that now border-image-slice defaults to 100% */ 
      border-image-width: 10px; 
      outline: 1px solid black; 
     } 

     p.checkBorderImageWidth2{ 
      border: 100px solid black; 
      width:500px; 
      border-image-source: url("1.png"); 
      /* Note that now border-image-slice defaults to 100% */ 
      border-image-width: 30px; 
      padding: 5px; 
      outline: 1px solid black; 
    } 

    </style> 
</head> 

<body> 
    <p class="checkBorderImageWidth">Hi this is just a demo</p> 
    <p class="checkBorderImageWidth2">The border covers the text.</p> 
</body> 

</html>

Hier ist die Grenze deckt den Text:

Quelle

2017-02-16 14:43:05 Sylvain

border-image-width in css

Antwort

Verwandte Themen