Beispiel:CSS3 border-radius.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</title>
<style>
div {
	border: medium solid red;
	display:inline-block;
	margin: 1em;
	padding: 2em;
	width: 10em;
}

#rund1 {
  border-radius: 1em;
}

#rund2 {
  border-radius: 1em;
  border: 0;
  background: red;
}

#rund3 {
  border-radius: 4em/1em;
}

#rund4 {
  border-radius: 10%/10%;
}

#rund5 {
  border-radius: 40%/40%;
}

#rund6 {
  border-radius: 50%;
  width: 6em;
  height: 6em;
  outline: medium solid yellow;
  box-shadow: 0px 0px 0px 5px black;
}

html { box-sizing: border-box; } 

* { box-sizing: inherit; }

p {clear:left;}

</style>

</head>

<body>
<h1>Verwendung von <code>border-radius</code></h1>
	<div id="rund1">mit Rand</div>
	<div id="rund2">ohne Rand</div>
 	<div id="rund3">4em/1em</div>
 	<div id="rund4">10%/10%</div>    
 	<div id="rund5">40%/40%</div>    
 	<div id="rund6">Kreis</div>      
<p><code>border-radius</code> müsste eigentlich <em>box-radius</em> heißen, da es nicht nur die durch <code>border</code> festgelegte Randlinie, sondern auch die Füllung der Box, sowie eine eventuelle <code>outline</code> oder einen <code>box-shadow</code> abrundet.<br>(siehe letztes div).</p>
</body>

</html>
Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:CSS3_border-radius.html&oldid=92259“