背景の描画領域を指定します:
div
{
border: 10px dotted black;
padding:35px;
background: yellow;
background-clip: content-box;
}
Try it Yourself ❯
background-clip プロパティは、背景の描画領域を指定します。
デフォルト値: | border-box |
---|---|
継承: | 継承する |
アニメーション可否: | 不可。animatable を参照 |
バージョン: | CSS3 |
JavaScript 構文: | object.style.backgroundClip="content-box" Try it |
表中の数字は、完全にプロパティをサポートした最初のブラウザのバージョンです。
プロパティ | |||||
---|---|---|---|---|---|
background-clip | 4.0 | 9.0 | 4.0 | 3.0 | 10.5 |
background-clip: border-box|padding-box|content-box|initial|inherit;
値 | 説明 | Play it |
---|---|---|
border-box | デフォルト値。背景をボーダーボックスの範囲に切り取ります | Play it ❯ |
padding-box | 背景をパディングボックスの範囲に切り取る | Play it ❯ |
content-box | 背景をコンテンツボックスの範囲に切り取る | Play it ❯ |
initial | プロパティにデフォルト値を設定します。initial を参照 | Play it ❯ |
inherit | このプロパティは親要素を継承します。inherit を参照 |
CSS3 チュートリアル:CSS3 Backgrounds
HTML DOM リファレンス:backgroundClip プロパティ