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: 33em;
  margin-inline: max(10px, 50% - var(--bodyWidth)/2);
  margin-block: 3em; 
}


</style>
</head>
<body><h1 class="full line">Unterstreichungen mit border-image</h1>
  <p>Mit den Rahmenbildeigenschaften der <code>border-image</code>-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.</p>

<section class="">
  <h2 class="left line">border-image mit Verlauf</h2>
  <p>Wenn man die <code>border-image-slice</code>-Eigenschaft mit dem Schlüsselwort <code>fill</code> verwendet, kann der von CSS erzeugte Gradient über die gesamte Fläche gezeichnet werden, anders als bei <code>Background-image</code> kann aber die Breite über das Element herausragen!</p>
  <p>Andererseits kann mit <code>border-image-width</code> die Rahmenbreite verkleinert und vergrößert werden.
</section>
  <h2 class="right line3">SELFHTML</h2>
  <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!</p>
  <p><a href="https://wiki.selfhtml.org/wiki/Hilfe:Wiki/Mitmachen">Hilf mit das SELFHTML-Projekt aktuell zu halten und zu verbessern!</a></p>

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