要点
- 01每个盒子阴影参数都有自己的滑块加上数值输入，用于像素精度调整。
- 02内陷切换在投影和内阴影之间切换，用于按下或拟态效果。
- 03颜色和不透明度单独控制，输出rgba()用于易读的CSS。
- 04预览使用真实CSS属性在真实元素上——您看到的正是您的样式表渲染的内容。
为什么使用可视盒子阴影生成器
CSS box-shadow可取高达六个值——水平偏移、垂直偏移、模糊半径、扩散半径、颜色和可选内陷关键字。从记忆中输入它们对简单阴影有效，但对于更细致的任何东西——紧凑发光、深投影、柔软提升层——您在重新加载时猜测和猜测，直到某些东西看起来正确。
可视生成器折叠该迭代循环。移动滑块，立即看到更改，仅在满意时复制。Handytool的盒子阴影生成器完全在您的浏览器中运行，因此预览是应用于真实元素的真实CSS属性——工具和您的实际页面之间没有渲染差异。
如何设计盒子阴影
- 01
调整水平和垂直偏移
正值将阴影向右和向下移动。负值将其向左和向上移动。居中阴影(0, 0)创建发光效果。
- 02
设置模糊半径
较高的模糊值创建更柔软、更扩散的阴影。零模糊产生硬、实心阴影轮廓。
- 03
调整扩散半径
正扩散在模糊前扩大阴影。负扩散缩小它，对紧凑的元素下阴影有用。
- 04
选择颜色和不透明度
使用颜色选择器选择阴影色调，然后拨低不透明度以获得微妙。输出使用rgba()保持值易读。
- 05
如果需要切换内陷
内陷从投影切换到内阴影——对按下按钮、下陷输入和拟态表面有用。
- 06
复制CSS声明
点击复制获取完整的box-shadow值并将其粘贴到您的样式表中。
无上传、无账户
生成器完全是客户端。您的颜色选择、数值和预览状态保留在您的浏览器中——没有任何内容发送到服务器。没有账户需要创建，也没有使用限制。
因为预览元素使用实际CSS box-shadow属性，输出定义上准确——没有canvas渲染或屏幕截图近似涉及。您复制的像素值就是浏览器应用的像素值。
盒子阴影生成器常见问题
扩散值做什么？
正扩散在应用模糊前在所有方向上扩大阴影；负扩散缩小它。当与低模糊配对时，对紧凑定义的发光有用。
我可以添加多个盒子阴影吗？
此生成器一次输出一个阴影。要分层它们，复制值并在您的CSS中用逗号分隔多个阴影——box-shadow接受逗号分隔列表。
为什么我的内陷阴影不可见？
内陷阴影在元素内绘制，因此它们需要背景颜色或可见填充来显示。它们在透明或零大小元素上不会出现。
预览是像素精确的吗？
是的——预览使用真实CSS box-shadow属性在真实DOM元素上，因此您看到的正是您的样式表会产生的。
什么是拟态阴影？
拟态使用两个阴影——一个浅色和一个深色——以相反方向偏移，使元素看起来从平面表面升起或按下。对于按下变量，两个阴影通常都内陷。