box-shadow
A CSS property used to add shadow effects outside an element's border, commonly for focus rings or card shadows, without triggering layout shifts; it is clipped inside containers with overflow:hidden.
Timeline (last 90 days)
The focus ring should use `outline` rather than `box-shadow`, because `outline` does not trigger layout shifts and will not be clipped by a parent element's `overflow: hidden`; a `box-shadow` focus ring often mysteriously disappears in scroll containers.
For elements whose background is unpredictable (such as buttons on photos or videos), the author layers a second focus ring—a white outline plus a black glow—and only in this case uses `box-shadow` as the two-layer supplement, accepting its clipping risk.
Under Windows High Contrast Mode (forced-colors), `outline` is preserved more reliably than `box-shadow`, which is another reason the author uses outline by default.
In the "properties you always have to look up" vote, grid ranked first with 22 votes, gradients ranked second with 14 votes, and box-shadow ranked third with 10 votes.
All Facts (4)
CSS中box-shadow、text-shadow和border-color的默认值就是当前元素的color值，不需要显式声明currentColor
90%UnverifiedThe focus ring should use `outline` rather than `box-shadow`, because `outline` does not trigger layout shifts and will not be clipped by a parent element's `overflow: hidden`; a `box-shadow` focus ring often mysteriously disappears in scroll containers.
50%UnverifiedFor elements whose background is unpredictable (such as buttons on photos or videos), the author layers a second focus ring—a white outline plus a black glow—and only in this case uses `box-shadow` as the two-layer supplement, accepting its clipping risk.
50%UnverifiedUnder Windows High Contrast Mode (forced-colors), `outline` is preserved more reliably than `box-shadow`, which is another reason the author uses outline by default.
50%