Beispiel:CSS3 box-decoration-break.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" type="text/css" media="screen" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css">
		<title>box-decoration-break</title>
		<style>
.beispiel h3 {
	background-image: linear-gradient(to right, #dfac20 30%, #ffede0 70%);
	border: medium solid #c32e04;
	border-radius: .5em;
	box-shadow: .2em .2em .5em #dfac20;
	display: inline;
	line-height: 3;
	margin: 1em;
	padding: .3em 1em;
	-webkit-box-decoration-break: slice;
	box-decoration-break: slice;
}
.clone h3 {
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}
.beispiel {
	display: inline-block;
	padding: .5em 1em;
	width: 17em;
}
		</style>
	</head>
<body>
	<h1>Verwendung von <code>box-decoration-break</code></h1>

	<section class="beispiel">
		<h2>slice</h2>
		<h3>Überschrift</h3>
		<p>nachfolgender Text</p>
		<h3>Überschrift, auf zwei Zeilen verteilt</h3>
		<p>nachfolgender Text</p>
		<h3>eine noch viel längere Überschrift mit viel Text, auf mehrere Zeilen verteilt</h3>
		<p>nachfolgender Text</p>
	</section>
	<section class="beispiel clone">
		<h2>clone</h2>
		<h3>Überschrift</h3>
		<p>nachfolgender Text</p>
		<h3>Überschrift, auf zwei Zeilen verteilt</h3>
		<p>nachfolgender Text</p>
		<h3>eine noch viel längere Überschrift mit viel Text, auf mehrere Zeilen verteilt</h3>
		<p>nachfolgender Text</p>
	</section>
		
</body>
</html>