Beispiel:CSS3 radial-gradient-1.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>radial-gradient() -1</title>
<style>
#eins { background-image: radial-gradient(red 30%, white 30%); }
#zwei { background-image: radial-gradient(circle, red 30%, white 30%); }
#drei { background-image: radial-gradient(circle, red 25%, white 75%); }
#vier { background-image: radial-gradient(red 25%, white 50%); }
body {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(10em, 1fr));
gap: 1em;
}
h1 {
grid-column: 1/-1;
}
div {
width: 100%;
aspect-ratio: 3 / 2;
border: thin solid;
}
figure {
margin: 0;
}
</style>
</head>
<body><h1>Verwendung von <code>radial-gradient()</code></h1>
<figure>
<div id="eins"></div>
<figcaption>Ellipse mit scharfer Kante<br>kein shape angegeben<br>(2 color-stops bei 30%)</figcaption>
</figure>
<figure>
<div id="zwei"></div>
<figcaption>Kreis mit scharfer Kante<br>Schlüsselwort circle<br>(2 color-stops bei 30%)</figcaption>
</figure>
<figure >
<div id="drei"></div>
<figcaption>Kreis mit weichem Übergang<br>(circle, red 25%, white 75%)</figcaption>
</figure>
<figure >
<div id="vier"></div>
<figcaption>Ellipse mit weichem Übergang<br>(red 25%, white 50%)</figcaption>
</figure>
</body>
</html>
