简体中文

132 · 设计与网页

盒子阴影生成器

拖动滑块塑造阴影形状，观看预览并复制 CSS。

您的数据： 该工具处理您在此浏览器中的输入。 CapyHelp 不会上传该输入来生成结果。 隐私详情

#1e1b4b

盒子阴影生成器的使用方法

  1. 调整偏移、模糊和扩散。
  2. 选择颜色和不透明度。
  3. 复制盒子阴影线。

自然的阴影

真实的阴影是柔和的并且略带色调。具有负扩散、低不透明度和设计中的一丝色彩的大模糊看起来比纯黑色更自然。第二个紧密的阴影增加了清晰的边缘，这就是“柔和的第二层”选项的作用。

示例

Y 12 像素，模糊 32 像素，扩散 −8 像素，25%

软卡阴影

插图

压入式的外观

问题

box-shadow 会影响布局吗？

不会。阴影是在元素外部绘制的，而不移动元素周围的任何东西。

自动翻译。回顾重要结果。