Beispiel:Box-decoration-break.html
<!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: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>
Inhaltsverzeichnis
Verwendung von box-decoration-break
<section class="beispiel">
slice
Überschrift
nachfolgender Text
Überschrift, auf zwei Zeilen verteilt
nachfolgender Text
eine noch viel längere Überschrift mit viel Text, auf mehrere Zeilen verteilt
nachfolgender Text
</section> <section class="beispiel clone">
clone
Überschrift
nachfolgender Text
Überschrift, auf zwei Zeilen verteilt
nachfolgender Text
eine noch viel längere Überschrift mit viel Text, auf mehrere Zeilen verteilt
nachfolgender Text
</section>
</body> </html>
