Beispiel:CSS border-image-3.html
Aus SELFHTML-Wiki
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>border-image mit Gradients</title>
<style>
.linear1 {
border-style: solid;
border-width: 1em;
border-image: linear-gradient(to top right, transparent, steelBlue ) 1;
}
.linear2 {
border: 0;
border-block-start: 1em solid;
padding-block-start: 1em;
border-image: linear-gradient(90deg, steelBlue, gold) 1;
}
.conic1 {
border-style: solid;
border-width: 1em;
border-image: conic-gradient(gold 45deg, steelBlue 135deg, #c82f04 225deg, #559000 315deg, gold 360deg) 1;
}
.conic2 {
border-style: solid;
border-width: 1em;
border-image: repeating-conic-gradient( from 45deg at 20% 20%,
steelBlue 0 10deg,
#c82f04 10deg 25deg,
gold 20deg 30deg,
orange 30deg 40deg,
#c82f04 40deg 50deg) 20;
}
.radial {
border: 0;
border-block-start: 1em solid;
border-inline-start: 1em solid;
padding: 1em;
border-image: radial-gradient(circle at top left, steelBlue, transparent 50%) 1;
}
.innerline {
border-style: solid;
border-width: 2em;
outline: 0.2em solid white;
outline-offset: -1.6em;
border-image: repeating-linear-gradient(45deg, gold, gold 10px, steelBlue 10px, steelblue 30px) 40;
}
body {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(12em, 1fr));
gap: 3em;
}
h1, h2 {
grid-column: 1/-1;
}
div {
width: 100%;
aspect-ratio: 3 / 2;
border: thin solid;
}
figure {
margin: 0;
}
</style>
</head>
<body><h1>border-image mit Gradients</h1>
<h2>lineare und radiale Verläufe</h2>
<figure>
<div class="linear1">Ein Rahmen mit einem Verlauf als Füllfarbe</div>
<figcaption>linearer Verlauf<br>von links unten nach rechts oben</figcaption>
</figure>
<figure>
<div class="linear2"></div>
<figcaption>linearer Verlauf<br>nur border-block-start</figcaption>
</figure>
<figure>
<div class="radial"></div>
<figcaption>radialer Verlauf<br>links oben zentriert</figcaption>
</figure>
<h2>konische Verläufe</h2>
<figure>
<div class="conic1"></div>
<figcaption>konischer Verlauf<br>jede Ecke in einer anderen Farbe</figcaption>
</figure>
<figure >
<div class="conic2"></div>
<figcaption>repeating-conic-gradient()<br>mit scharfen Kanten</figcaption>
</figure>
<figure>
<div class="innerline"></div>
<figcaption>repeating-linear-gradient<br>outline und outline-offset</figcaption>
</figure>
</body>
</html>
