📐 CSS box-shadow 属性规则详解
CSS box-shadow 语法：[inset] <offset-x> <offset-y> [<blur-radius>] [<spread-radius>] <color>。
多层阴影叠加原理
同时叠加近距离高不透明度细阴影与远距离低不透明度漫反射阴影，可让界面更柔和逼真。
内阴影与新拟态
添加 inset 可将阴影绘制在边框内部，适合凹陷输入框与新拟态效果。
CSS 盒子阴影生成器 (Box Shadow Studio)
可视化调配 CSS 盒子阴影属性，支持偏移、模糊、扩散、透明度、内阴影及多层叠加，一键生成 CSS 与 Tailwind 代码。
SHADOW / LIVE PREVIEW
实时渲染舞台
舞台背景深空黑 板岩灰 浅灰白 纯白
{{currentShadowSummary}}
{{layers.filter(l=>l.enabled).length}} 层阴影叠加盒子颜色
盒子尺寸
W
×H
圆角
图层 #{{idx+1}} {{layer.inset?'(Inset)':''}}{{layer.enabled?'◉':'○'}}
💡 光源罗盘
拖拽黄点调整光照方向
🎨 经典阴影预设库
点击载入预设{{preset.name}}
OUTPUT / READY TO SHIP复制 CSS 复制 Tailwind
/* Standard CSS */
box-shadow: {{fullBoxShadowValue}};/* Cross-browser Prefix */
-webkit-box-shadow: {{fullBoxShadowValue}};
box-shadow: {{fullBoxShadowValue}};/* Tailwind Arbitrary Shadow */
shadow-[{{fullBoxShadowValue.replace(/\s+/g,'_')}}]