Beispiel:CSS3 border-radius-2.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche
<!DOCTYPE html>
<html lang="de">
<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>border-radius - 2</title>
<style>
div {
	border: 3px solid red;
	padding: 2em;
	width: 10em;
	float: left;
	margin: 1em;
}

#rund1 {
  border-radius: 1em 3em;
}

#rund2 {
  border-radius: 1em 2em 3em 4em;
}

#rund3 {
  border-radius: 0 1em 2em;
}

h1 {
    height:2em;
    text-align: center;
	background-image: linear-gradient(yellow, orange, red);
	border-bottom-left-radius: 10% 50%;
	border-bottom-right-radius: 10% 50%;
}
html { box-sizing: border-box; } * { box-sizing: inherit; }

h2 {
  float: none;
  clear: left;
}
</style>

</head>

<body>
<h1>Verwendung von <code>border-radius</code></h1>
<main>
 <h2>unterschiedliche Ecken</h2>
	<div id="rund1">zwei Werte</div>
	<div id="rund2">vier Werte</div>
 	<div id="rund3">drei Werte</div>   
    
</main>
</body>

</html>