I'm trying to create a style for a box with a shadow that's the same color as its text. Because I have several boxes, each with a different text color, I'd like to avoid having to repeat the same color in each individual ruleset for every box.

Now, the Backgrounds and Borders module states, for box-shadow (which also applies to text-shadow):

Where

<shadow> = inset? && [ <length>{2,4} && <color>? ]

The components of each <shadow> are interpreted as follows:

  • ...

  • The color is the color of the shadow. If the color is absent, the used color is taken from the ‘color’ property.1

This means that if you don't specify a shadow color on a given element, then the shadow color that's used must be taken from the text color that's computed for that element. This is similar to the behavior associated with borders without an explicit color, that dates all the way back to CSS1 and remains unchanged in CSS2.

However, I'm aware that this was not always the case for shadows — previously (as late as 2011!) the color chosen was left up to the browser to decide in both the Text module and the B&B module. And indeed, testing in the past, I recall, showed that some browsers chose black and others chose transparent (or ignored the shadow style completely). This might even have varied between text-shadow and box-shadow. Of course, this is understand

Edit
Report