background-clip#

#Introduction

The background-clip CSS property sets whether an element's background extends underneath its border box, padding box, or content box.

#Examples

css-apisrc/background-clip/App.tsx

Code

Preview

#Syntax

background-clip: border-box;
background-clip: padding-box;
background-clip: content-box;
background-clip: border-area;

// multiple clip
background-clip: border-box, content-box, padding-box, border-area;

#Values

• border-box
  The background extends to the outside edge of the border (but underneath the border in z-ordering).

• padding-box
  The background extends to the outside edge of the padding. No background is drawn beneath the border

• content-box The background is painted within (clipped to) the content box.

• border-area The background is painted within (clipped to) the area painted by the border, taking border-width into account.

#Note

If the length of background-clip is less than background-image, the first clip value will effect on all remained background-image.

#Formal definition

#Formal Syntax

<background-clip> = <box> | border-area

where

<box> = border-box | padding-box | content-box

#Difference between web

• Only support border-box、padding-box、content-box 、 border-area
  

• background-clip:text is not support, and if want show text with gradient color, just set color: <gradient>.

• border-area doesn't take border-style into account.

#Compatibility