Beispiel:CSS3 radial-gradient-1.html
Aus SELFHTML-Wiki
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" media="screen" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css">
<title>radial-gradient() -1</title>
<style>
#eins { background-image: radial-gradient(circle, red 30%, white 30%); }
#zwei { background-image: radial-gradient(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, 15em);
gap: 1em;
}
h1 {
grid-column: 1/-1;
}
div {
width: 15em;
height: 10em;
border: thin solid;
}
figure {width:15em;}
</style>
</head>
<body>
<h1>Verwendung von <code>radial-gradient()</code></code></h1>
<figure>
<div id="eins"></div>
<figcaption>Kreis mit scharfer Kante<br>(2 color-stops bei 30%)</figcaption>
</figure>
<figure>
<div id="zwei"></div>
<figcaption>Ellipse mit scharfer Kante<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>
