CSS 盒子阴影生成器

CSS Box 阴影生成器是 CSS Box-Shadow 属性的可视化编辑器。 用滑块调整偏移、模糊半径、展开半径、颜色和不透明度，并在预览元素上实时渲染结果，然后复制确切的 CSS。 而不是猜测像素值并重新加载页面，您可以直接塑造阴影并读取它产生的代码。

Box-shadow 属性看似深沉。 单个声明可以堆叠多个阴影，每个阴影都有自己的偏移量、模糊、扩展、颜色和可选的 inset 关键字，该关键字将元素内部而不是外部绘制。 真正的界面阴影几乎总是使用两个或更多层来看起来自然，这对手写来说很乏味。 此工具为您管理层并以正确的逗号分隔顺序输出规范有效的声明。

一切都发生在您的浏览器中。 选择一个预设，调整图层，在浅色和深色背景之间切换预览，并复制标准属性或还包含 -webkit- 前缀的块。 没有帐户，没有上传，一旦页面加载，它就会继续脱机工作。

影子画在盒子外面,不占空间,所以它们从不推动邻居,并且会被任何隐藏溢出的祖先夹住。传播是最不被理解的值:它在模糊之前会生长或缩小阴影形状,因此零模糊的正传播给出坚实的偏移轮廓,这就是边界效果的伪造方式,而不影响布局。Inset 将阴影移动到元素内部,对按压状态和内部光泽有用。以增加偏移和模糊的方式分层几个阴影是构建令人信服的深度,因为单个大模糊读取为雾而不是阴影。每一层都需要渲染时间,并且在滚动或动画期间重新绘制的阴影是低功耗设备上常见的 jank 来源。