border-image-beginning in CSS

So definiert MDN border-image-outset.border-image-beginning in CSS

Die Eigenschaft border-image-beginning beschreibt, um welchen Betrag der Rahmen Bildbereich über den Rahmen hinausgeht.

Was verstand ich

Jetzt wird mein Bild das Gebiet border-image-Anfang + border-width + boder-Bild-Breite abzudecken.

Aber mein Beispiel zeigt mir, dass mein Verständnis falsch ist. Zur Vereinfachung definiere ich keine Randbildbreite. Wir werden nur Rand-Breite + Rand-Bild-Anfang verwenden. Jedoch werden wir Kontur-Kurzschrift-Eigenschaft verwenden, um zu sehen, wo der tatsächliche Rand liegen wird.

Border Bild verwendet:

Code:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Border-image-width</title> 
    <style> 

     p.ShowingBorderImageOutsetExample{ 
      border: 1px solid black; 
      width:500px; 
      border-image-source: url("1.png"); 
      border-image-slice: 20%; 
      border-image-outset: 6; 
      outline: 1px solid black; 
     } 

    </style> 
</head> 
<body> 
<p class="ShowingBorderImageOutsetExample">Hi this is just a demo</p> 
</body> 
</html>

Der Ausgang ist wie folgt:

Die schwarze Linie ist Umriss. Die farbige Linie ist unsere Bildgrenze.

Die Frage ist, sollte die Bildgrenze nicht eine Breite von 7px (6px Rand-Bild-Umriss + 1px Randbreite) abdecken, während es nur 1px in Ausgabe abdeckt?

Quelle

2017-02-17 Breaking Benjamin

Die border-image-outset Eigenschaft beschreibt, mit welchem Betrag der Grenze Bildbereich erstreckt sich über die Grenze Box, aber nicht definiert, deren Größe, border-width/border-image-width tut das.

Für border-image-width definiert es die Breite des Rahmenbilds, indem nach innen gerichtete Offsets von den Randkanten definiert werden. Wenn border-image-width größer als border-width ist, erstreckt sich das Rahmenbild über die Füll- (und/oder Inhalts-) Kante hinaus.

Oder einfach ausgedrückt, border-image-outset definiert, wie weit Grenze erstrecken sollte, border-width und border-image-width seine Größe definiert (Breite der Grenze).

Da Sie gab nur die Grenze eine Größe von 1px und keine border-image-width, das ist, wie es zu machen, und wenn Sie es 6px geben, und legen Sie den Anfang auf den gleichen, werden Sie dieses nicht erhalten, erste p . In der zweiten , wo der Anfang 12px ist, und die border-image-width auf 12px eingestellt ist, wird es bis zum Umriss rendern.

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Border-image-width</title> 
 
    <style> 
 

 
     p.ShowingBorderImageOutsetExample{ 
 
      border: 6px solid black; 
 
      width:500px; 
 
      border-image-source: url("https://i.stack.imgur.com/syjY3.png"); 
 
      border-image-slice: 20%; 
 
      border-image-outset: 6px; 
 
      outline: 1px solid black; 
 
      margin-left: 10px; 
 
     } 
 

 
     p.ShowingBorderImageOutsetExample2{ 
 
      border: 6px solid black; 
 
      width:500px; 
 
      border-image-source: url("https://i.stack.imgur.com/syjY3.png"); 
 
      border-image-slice: 20%; 
 
      border-image-width: 12px; 
 
      border-image-outset: 12px; 
 
      outline: 1px solid black; 
 
      margin-left: 10px; 
 
     } 
 

 
    </style> 
 
</head> 
 
<body> 
 
<p class="ShowingBorderImageOutsetExample">Hi this is just a demo</p> 
 
<p class="ShowingBorderImageOutsetExample2">Hi this is just a demo</p> 
 
</body> 
 
</html>

Quelle

2017-02-17 15:11:23 LGSon

Leider habe ich noch nicht, dass du bist. Border-Image-Start definiert mehr Platz, an dem sich ein Bild über die Grenze hinaus erstrecken kann. Nun, in meinem Beispiel habe ich die Rahmenbreite 1px definiert. border-image-width Standardwert ist 1 und border-image-output als 6 = 6px in meinem Beispiel.Also sollte das Bild im Bereich 7px (6px außerhalb + 1 px der Rahmenbreite) gestreckt werden? Bitte ignorieren Sie Ecken und alles, um die Diskussion zu vereinfachen. –

@BreakingBenjamin 'border-image-beginning' definiert nicht Leerzeichen, aber wie weit der Rahmen hinausragen soll,' border-width' und 'border-image-width' definieren die Größe (Breite des Rahmens) – LGSon

border-image-beginning in CSS

Antwort

Verwandte Themen