使用 CSS 在元素上实现多个阴影

尝试在 CSS 中重新创建 Photoshop 按钮设计，您可能会在将多个框阴影应用到一个元素时遇到限制。单一元素。默认情况下，CSS 只允许一个活动的盒子阴影，无论是内部还是外部。

要克服这一限制，您可以利用 CSS3 提供的逗号分隔功能。这允许您在同一 box-shadow 属性中指定多个阴影定义：

box-shadow: inset 0 2px 0px #dcffa6, 0 2px 5px #000;

通过分隔使用逗号的两个阴影定义，您可以有效地在按钮元素上创建两个不同的阴影。第一个阴影，inset 0 2px 0px #dcffa6，代表内部灯箱阴影，而第二个阴影，0 2px 5px #000，创建外部阴影。

此技术允许您实现所需的按钮同时应用两个阴影的造型，提供更真实、更具视觉吸引力的效果。