Box-shadow 生成器 - CSS：层叠样式表 | MDN

HTML: Markup language
CSS: Styling language
JavaScript: Scripting language
Web APIs: Programming interfaces
Learn web development
Get to know MDN better
此页面由社区从英文翻译而来。了解更多并加入 MDN Web Docs 社区。
View in English Always switch to English
这个可视化工具可以帮助你生成一个元素的 CSS box-shadow 相关代码，添加 box shadow 效果到你的 CSS 对象上。
Box-shadow 生成器可以向一个元素上添加一至多个 box shadow。
启动工具以后，你可以在顶侧右部找到一个长方形，那是要应用阴影效果的元素。当该元素被选择（首次加载页面时即如此）时你可以应用一些基本的样式：
要添加一个阴影，点击左上侧的“+”按钮，这就增加了一个阴影，并将其列在左边的栏里。现在你可以设置新阴影的值：
要添加另一个阴影，再次点击“+”。现在你设置的任何数值都将应用于这个新的阴影。用左上方的 ↑ 和 ↓ 按钮改变这两个阴影的应用顺序。再次选择第一个阴影，在左边的栏目中点击它。要更新元素本身的样式，请点击顶部标有“element”的按钮来选择它。
你可以为该元素添加 ::before 和 ::after 伪元素，并给它们加上盒状阴影。要在元素和它的伪元素之间进行切换，可以使用顶部标有“element”、“:before”和“:after”的按钮。
右下角的方框包含该元素的 CSS 和任何 before:: 或 ::after 伪元素。
该交互性工具可以让你可视化地创建边框图片（border-image 属性）。
该交互性工具可以让你可视化地创建圆角（border-radius 属性）。
此页面最后更新于 2025年11月10日，由 MDN 贡献者更新。
本内容的部分版权归 mozilla.org 贡献者所有，©1998–2026。内容依据知识共享许可协议提供。