Свойство CSS box-shadow рисует одну или несколько теней вокруг элемента, не меняя раскладку документа. ShadowStack показывает только значения, которые входят в скопированное свойство, поэтому предпросмотр браузера и код можно сопоставить напрямую. Каждый слой сохраняет явный порядок, состояние inset, четыре длины в пикселях, HEX-цвет и непрозрачность.

Inset меняет область, а не значения

Внешняя тень рисуется за пределами border box и может обозначать подъём. Слово inset переносит отрисовку внутрь границы и может показать нажатую поверхность, углубление или затенение края. ShadowStack ставит inset в начало канонического слоя, но не меняет смещения, размытие, расширение, цвет и непрозрачность. Из-за другой геометрии одинаковые числа внутри могут выглядеть гораздо сильнее. Начните с меньшей непрозрачности и умеренного размытия, затем проверьте внутренние отступы и границы реального компонента.

Mélangez consciemment les couches

Одно свойство может содержать и внешние, и внутренние слои. Порядок списка остаётся явным, но области отрисовки разные, поэтому такие слои нельзя считать взаимозаменяемыми ступенями глубины. Перед изменением выберите нужную вкладку и прочитайте метку inset перед перестановкой. Сдержанный вариант — одна лёгкая внешняя тень для отделения и один полупрозрачный внутренний свет или затемнение для фактуры. Не используйте тень как единственный индикатор фокуса, ошибки или выбора: она может исчезнуть на другом фоне или в режиме высокой контрастности.

Проверьте CSS в реальном компоненте

ShadowStack показывает скопированное свойство движком текущего браузера, но предпросмотр не подтверждает совместимость или доступность. Вставьте CSS в реальный компонент и проверьте все поддерживаемые браузеры, адаптивные ширины, фоны и контейнеры с overflow. Широкое размытие может обрезаться родителем, а внутренняя тень — перекрывать содержимое или индикатор фокуса. Проверьте клавиатурный фокус во всех состояниях, измерьте контраст текста и элементов отдельным инструментом и оставьте границу или другое различие, если интерфейсу нужны ясные контуры. Капсула не хранит пресеты или историю, поэтому сохраните принятый CSS в своём файле под контролем версий до перезагрузки.