background-clip CSS プロパティとは
トピック：背景（カラーまたはイメージ）が要素内でどれだけの範囲での描画領域を指定・定義することができる 要素の背景、色や画像のどちらかが、拡張するかどうかを指定する
プロパティ background-clip
実例 コード 1
サンプル コードを試す div {
border: 10px dotted black;
padding: 15px;
background:lightblue;
background-clip:padding-box;
}
プロパティ
| デフォルト値・初期値 : | border-box |
|---|
| 適用対象 : | 全要素 ::first-letter and ::first-line. |
|---|
| 継承 : | 不可 |
|---|
| メディア : | visual |
|---|
| 計算値 : | 指定値 |
|---|
CSS Version | CSS3 |
|---|
| Animation type : | discrete |
|---|
| JavaScript 構文 | object.style.backgroundClip="content-box" |
|---|
| 正規順序 : | 形式文法で定義される一意のあいまいでない順序 |
|---|
| CSSの構文 | background-clip: border-box |padding-box |content-box |initial |inherit; |
|---|
| 値 | 説明 |
|---|
border-box | 背景が境界線の外側に広がるように指定する 境界線の下に背景が描画される これはデフォルト値です。 |
padding-box | バックグラウンドがパディングの外側の端まで広がるように指定する ボーダーの下に背景は描画されない |
content-box | バックグラウンドがコンテンツボックス内でのみ塗り潰される（クリップされる）ことを指定する ボーダーとパディングエリアの下に背景は描画されない |
inherit | 親要素からこのプロパティを継承する |
inherit | 親要素からこのプロパティを継承する |
実例 コード 2
サンプル コードを試す.box {width: 250px;height: 150px;padding: 10px;border: 6px dashed #333;background: orange;background-clip: content-box;}
サポートするデスクトップ ブラウザ対応・互換性
| 機能 | Chrome | Firefox | Internet Explorer | Opera | Safari |
|---|
| 基本サポート | 1.0 [3] | 4.0 (2.0) [1] | 9.0 [2] | 10.5 | 3.0 (522) [3] |
|---|
content-box | 1.0 [3] | 4.0 (2.0) [1] | 9.0 [2] | サポートなし✖ | 3.0 (522) [3] |
|---|
サポートするモバイル ブラウザ対応・互換性
| 機能 | Android | Firefox Mobile | IE Phone | Opera Mobile | Safari Mobile |
|---|
| 基本サポート | 不明 | 不明 | 不明 | 不明 | 不明 |
|---|
content-box | 不明 | 不明 | 不明 | 不明 | 不明 |
|---|
CSS background-clip | CSS プロパティ 値| 意味 使い方 実例 – WebRef