Beispiel:CSS border-image-6.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>border-image - 6</title> <style> .line { 

 --bWidth: .5em; /* border thickness  */
 --gradient: repeating-linear-gradient(45deg,black 0 10px,red 0 20px,gold 0 30px);
 border-image: var(--gradient) fill 0/calc(100% - var(--bWidth)) 0 0/0 0 0 0 repeat;
 padding-block: 1em;

}

.left { 

 border-image-outset: 0 0 0 50vw;
 width: fit-content;

} .right { 

 border-image-outset: 0 50vw 0 0;
 width: fit-content;

}

.full { 

 border-image-outset: 0 50vw;
 width: fit-content;

} h2.line { 

 --bWidth: 0.2em;
 --gradient: repeating-linear-gradient(-90deg,steelblue 0 15px, gold 0 22px);

} .line3 { 

 --bWidth: .5em;
 --gradient: linear-gradient(steelBlue 33%, white 0 66%,gold 0);
 border-image: var(--gradient) fill 0/calc(100% - var(--bWidth)) 0 0/0 100vw .5em 0

}

body { --bodyWidth: 40em; 

 margin-inline: max(10px, 50% - var(--bodyWidth)/2);
 margin-block: 3em;

}


</style> </head>

<body>

Unterstreichungen mit border-image

Mit den Rahmenbildeigenschaften der border-image-Eigenschaft kann man ein Bild festlegen, das – in Einzelteile zerlegt – in den Rahmenbereichen eines Elements angezeigt wird. Bevor es border-radius gab, wurden so „runde Ecken“ erzeugt. Noch interessanter ist es aber, vom Browser erzeugte Verläufe für vielfältige visuelle Zwecke zu verwenden.

<section class="">

border-image mit Verlauf

Wenn man die border-image-slice-Eigenschaft mit dem Schlüsselwort fill verwendet, kann der von CSS erzeugte Gradient über die gesamte Fläche gezeichnet werden, anders als bei Background-image kann aber die Breite über das Element herausragen!

Andererseits kann mit border-image-width die Rahmenbreite verkleinert und vergrößert werden. </section>

SELFHTML

<p><a href="https://wiki.selfhtml.org/wiki/SELFHTML:Verein/Chronik">SELFHTML bietet seit 1995 eine Dokumentation</a> zu allem rund um HTML (und ab 1997) auch zu CSS. Mittlerweile gibt es über 300 CSS-Eigenschaften in unserem Wiki!

<a href="https://wiki.selfhtml.org/wiki/Hilfe:Wiki/Mitmachen">Hilf mit das SELFHTML-Projekt aktuell zu halten und zu verbessern!</a>

</body> </html>

Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:CSS_border-image-6.html&oldid=99830“