Tbpgr Blog

Ruby プログラマ tbpgr(てぃーびー) のブログ

CSS3新要素 | 背景・ボーダー | box-decoration-break

概要

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現在、この機能を実装しているブラウザがないため確認出来ず