background-clip
background-clip は CSS のプロパティで、要素の背景を境界ボックス、パディングボックス、コンテンツボックスのどれまで拡張するかを設定します。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 1 | 12 | 4 | 5 | 18 | 5 | |
border-box | 1 | 12 | 4 | 3 | 18 | 2 |
content-box | 1 | 12 | 4 | 3 | 18 | 1 |
padding-box | 1 | 12 | 4 | 3 | 18 | 2 |
background-clip `background-clip` 手書きの値 | 21 | 12 | 22 | 5.1 | 25 | 4 |
注釈 2件
対応条件
- ベンダープレフィックス付きで対応: -webkit- (1)
実装メモ
- Chrome は、その値に対して別の同義語である `padding`、`border`、および `content` を受け入れます。
注釈 2件
対応条件
- ベンダープレフィックス付きで対応: -webkit- (12)
実装メモ
- Edge 79 以降、その値に対して代替の同義語である `padding`、`border`、および `content` が受け入れられます。
注釈 5件
対応条件
- ベンダープレフィックス付きで対応: -webkit- (49)
- ベンダープレフィックス付きで対応: -moz- (1)
制限事項
- このブラウザでは部分的にしか実装されていません
削除済み
- このバージョンで機能が削除されました (4)
実装メモ
- `-moz-background-clip を使用しました。 border` 構文。
注釈 2件
対応条件
- ベンダープレフィックス付きで対応: -webkit- (3)
実装メモ
- Safari は、その値に対して別の同義語である `padding`、`border`、および `content` を受け入れます。
注釈 2件
対応条件
- ベンダープレフィックス付きで対応: -webkit- (18)
実装メモ
- Chrome Android は、その値に対して別の同義語である `padding`、`border`、および `content` を受け入れます。
注釈 2件
対応条件
- ベンダープレフィックス付きで対応: -webkit- (1)
実装メモ
- Safari は、その値に対して別の同義語である `padding`、`border`、および `content` を受け入れます。
基本構文
CSS
.padded-bg {
background-color: #f0f0f0;
background-clip: content-box;
padding: 20px;
}ライブデモ
実務での使いどころ
-
コンテンツ領域のみの背景表示
background-clip: content-box とパディングを組み合わせて、コンテンツ領域だけに色を付けた視覚的な余白効果を作成できます。
注意点
- background-clip: text はこの機能とは別に定義されています。テキストクリッピングには background-clip: text を使用してください。
アクセシビリティ
- 背景の描画範囲を変更してもコンテンツの読みやすさに影響がないことを確認してください。特にボーダー周辺の視覚的な区切りが失われないよう注意が必要です。