Web、UI与CSS
卡片阴影模糊，如何调整模糊与扩展？
使用工具
想让卡片微浮，结果四周灰雾；增加模糊虽柔和，却削弱边界。不要只用大小理解阴影，应区分偏移、柔化、扩展、透明度。逐项调整可把 CSS 数字与外观对应起来。
先用无模糊阴影读偏移
box-shadow: 4px 8px 0px 0px rgb(15 23 42 / 0.18);设 #0F172A、x=4、y=8、模糊与扩展=0、alpha=0.18、关闭 inset。影向右四、向下八像素，清楚轮廓便于检查方向。负 x 向左、负 y 向上。
阴影不预留布局空间，邻卡间距需 gap 或 margin。影扩大可视觉重叠但盒子未移动，应区分几何位置与绘制范围。
模糊与扩展不是同一控制
box-shadow: 0px 8px 24px 0px rgb(15 23 42 / 0.18);x 回零，只增模糊到 24，边缘变柔。正扩展放大原形，负值缩小。把两者都当增大阴影的同一手段，可能产生意外浓边。
负模糊无效，但偏移和扩展可负。不要为消错直接去负号，应确认字段。想内阴影可检查独立 inset 选项，而不是强行调位移。
用 alpha 调浓度并结合背景检查
定形后比较 alpha 0.10、0.18、0.30；零透明、一不透明。同值在明暗背景不同。为暗色主题看得见而全局加浓，可能让亮色主题过重。
颜色本身含 alpha 时也要查独立 alpha 设置，输出使用该值。保留设置可能解释为何仅改颜色不改变预期透明度，应读最终 rgb(... / 0.18)。
深色主题也需考虑阴影外的边界
近黑面叠近黑影可能难辨，边线、面明度或间距可更清楚。选中和可点击状态不能只靠影，需其他提示，并与键盘焦点区分。
父容器 overflow 裁切可能截断阴影。增大前应查绘制区域。预览有、实际无，不一定复制失败，可能布局约束不同。
从单个预览回到真实列表检查
单卡轻影在十卡列表可能整体过重。应检查实际数量、间距、文字及小屏滚动，优先阅读和操作清晰，而非阴影存在感。
当前基本界面调整一层影。CSS 可逗号叠层，但界面无专门加层操作。先一层满足需要，若使用处需多层，应定义验证各层作用，不默认越多越好。