CSS3 background-clip プロパティ

❮ 前章へ 完全な CSS リファレンス 次へ ❯

背景の描画領域を指定します:

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

CSS 構文

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 プロパティ


❮ 前章へ 完全な CSS リファレンス 次へ ❯