为什么真实的阴影要用多层叠加
box-shadow 接受水平偏移、垂直偏移、模糊半径、可选的扩展半径和颜色,inset 关键字则把阴影移到元素内部。只用一层往往显得扁平,因为真实光照同时产生贴近物体的接触阴影和范围更大的环境阴影。用逗号叠加多层(通常是较小较深的一层压在较大较柔和的一层之上)正是设计系统表达层级的方式。本工具可独立编辑每一层并预览叠加效果。
如何使用CSS 阴影生成器 — 多层与内阴影
- 1在工具区域粘贴、输入或上传需要处理的内容。
- 2根据任务选择格式、尺寸、输出方式或校验选项。
- 3检查预览结果、提示信息或转换后的数据。
- 4确认结果无误后复制或下载,并用于后续工作。
CSS 阴影生成器 — 多层与内阴影的常见使用场景
快速完成日常任务
无需安装桌面软件,打开网页即可处理常见的文本、图片、数据或格式转换任务。
检查与整理内容
在提交文件、发布内容或复制结果之前,快速发现格式问题并获得结构清晰的输出。
注重隐私的浏览器处理
对于支持本地运行的工具,数据会留在当前浏览器中,不需要上传到第三方服务。
常见问题
模糊半径和扩展半径有什么区别?
模糊半径在给定距离内柔化阴影边缘;扩展半径则在模糊之前放大或缩小阴影形状。负的扩展值会把阴影收回,这正是让大范围柔和阴影不从元素两侧溢出的方法。
为什么单层阴影看起来不自然?
真实层级包含两部分:贴近物体、颜色更深的接触阴影,以及范围更大、更浅的环境阴影。只用一层大模糊会变成一团灰雾。请叠加两层,使用不同的偏移和不透明度。
text-shadow 支持内阴影或扩展半径吗?
不支持。text-shadow 只接受水平偏移、垂直偏移、模糊和颜色。本工具在文字模式下会隐藏这些控件,并在生成的 CSS 中省略相应值,而不是输出浏览器会忽略的声明。
大范围模糊阴影的渲染开销大吗?
可能较大。元素在动画或滚动时,过大的模糊半径会迫使浏览器重绘很大区域。如果出现卡顿,可减小模糊半径、避免直接对阴影做动画,或改为对伪元素的 opacity 做动画。