background-clip

要素の背景をどのボックスまで描くか決めるプロパティ。border・padding・contentのどこで背景を切り取るか比べます。

CSSの`background-clip`とは？

border-box・padding-box・content-boxをライブプレビューで切り替えながら、背景を描画する範囲、初期値、background-originとの違いを初学者向けに解説します。

遊んでみよう

背景は固定・描画範囲だけを切り替え

CONTENT

境界線の外側まで背景を描きます

CSS

.element background-clip: border-box;

値のパターン

背景を描く範囲 background-clip

background-clipの構成要素

01background-clip

背景の描画領域

背景色や背景画像を見せる範囲を、ボックスモデルの領域から選びます。

02border | padding | content

ボックスモデルの3領域

境界線、内側の余白、内容という入れ子の領域のどこまで背景を広げるか決めます。

03clip

外側を切り取る

選んだ領域の外側では、背景色も背景画像も描画されなくなります。

早見表

初期値はborder-boxです。半透明や破線のborderを使うと、背景が境界線の下まで伸びるかを確認しやすくなります。

01border-box境界線の外側まで描画初期値

02padding-box境界線の内側まで描画borderを除く

03content-box内容領域だけに描画paddingも除く

04text文字の形で背景を切り取る文字色の調整も必要

05padding-box, content-box背景ごとに描画範囲を指定カンマ区切り

よくある使い方

破線の境界線の下まで背景を描く

初期値のborder-boxでは、半透明や破線のborderのすき間にも背景が見え、要素全体をひと続きに塗れます。

.card { border: 8px dashed rgb(32 32 51 / 0.6); background-clip: border-box; }

境界線の内側だけへ背景を塗る

padding-boxを使うとborderの下から背景を除き、境界線と背景の色をはっきり分けられます。

.notice { background-clip: padding-box; }

文字へグラデーションを映す

textで背景を文字の形に切り取り、文字色を透明にすると、グラデーション文字を作れます。

.title { background: linear-gradient(90deg, #7258e8, #d9472b); background-clip: text; color: transparent; }

ポイント

clipは「描く範囲」、originは「置く基準」。

background-clipは背景をどこまで描くかを決め、background-originは背景画像の位置を測る基準を決めます。初期値はborder-boxで、すべての要素と::first-letter・::first-lineに適用でき、子要素へは継承されません。背景は境界線の背後に描かれるため、border-boxとの差は半透明や破線のborderで確認しやすくなります。textを使う場合は、画像が読めないときも文字を読める代替色と十分なコントラストを用意します。