概要
css3のボックスが改行する際の表示形式を指定するbox-decoration-breakについて説明します
プロパティ名
box-decoration-break
内容
ボックスが改行する際の表示形式を指定します
設定値
| 設定値名 | 設定値内容 |
|---|---|
| slice | スタイルが全体に適用される |
| clone | 分割され、スタイルがそれぞれに適用される |
サンプル
<!DOCTYPE HTML> <html lang="ja-JP"> <head> <meta charset="UTF-8" /> <title>box-decoration-break</title> <style type="text/css"> p { border-style:dashed; border-width:10px; border-color:#000; width:300px; padding:10px; background-color:skyblue; } p#contents1 { box-decoration-break:slice; border-radius:50px; } p#contents2 { box-decoration-break:clone; border-radius:50px; } </style> </head> <body> <p id="contents1"> slice a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> </p> <p id="contents2"> clone a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> a<br /> </p> <hr /> </body> </html>
完成画面のキャプチャ
※2012/03/23現在、この機能を実装しているブラウザがないため確認出来ず
