Beispiel:CSS3 box-decoration-break.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">
<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>