Aug 23, 2024, 3:57 PM@polotek @chriscoyier - `background-clip` defines which box boundary (border, padding or content) a background *image* is painted within; it doesn't affect background *colors*.
- `background-image` is used to paint solid colors using linear gradients, which are technically background images.
- each one has three comma-separated values, which can be interpreted as 3 separate paint instructions, each with its own `background-image` and `background-clip` value.
Aug 23, 2024, 4:06 PM@polotek @chriscoyier So it works as 3 instructions:
1. Paint a blue-to-blue gradient image, and clip it at the box's content boundary.
2. Paint a green-to-green gradient image, and clip it at the box's padding boundary.
3. Paint a yellow-to-yellow gradient image, and clip it at the box's border boundary.
Note that each layer is painted *behind* the previous layer. The spec has a fairly readable section on layering multiple background images:
https://drafts.csswg.org/css-backgrounds/#layering
Aug 23, 2024, 4:07 PM@polotek @chriscoyier (I’ve also used some made up vocabulary that doesn't match the vocabulary used in the spec, so don't quote me verbatim ^^)