CSS 阴影生成

对于卡片上的逼真投影，请使用以下原则：从较小的Y偏移值（2-8px）开始，以模拟来自上方的光源角度。将模糊半径设置为Y偏移的大约2-3倍以获得自然的柔和度（例如，偏移4px，模糊10-12px）。使用微妙的扩展（-1px至2px）来控制阴影大小而不影响元素尺寸。选择低不透明度颜色（0.1-0.3 alpha）而不是纯黑以获得自然外观。深灰色（不透明度为10-30%的#000000）通常比纯黑效果更好。对于卡片提升效果，分层2-3个阴影，具有递增的模糊和递减的不透明度：第一个阴影锐利且接近（Y: 2px，模糊: 4px，不透明度: 0.15），第二个阴影更柔和且更远（Y: 8px，模糊: 16px，不透明度: 0.1）。这创建了Material Design中看到的多级深度。在浅色和深色背景上测试——阴影应该可见但不会分散注意力。对于浅色背景使用较高的不透明度（20-30%），对于深色背景使用较低的不透明度（10-15%）以保持对比度平衡。

每个阴影属性在创建所需的视觉效果时都有特定用途：水平偏移（X）：向左（-值）或向右（+值）移动阴影。正值模拟来自左侧的光，负值来自右侧。典型范围：-20px至20px。垂直偏移（Y）：向上（-值）或向下（+值）移动阴影。正Y（最常见）模拟顶光源。负Y创建不自然的背光效果。典型范围：-20px至30px。模糊半径：控制阴影柔和度/边缘模糊度。0px = 锐利、硬阴影。较高的值 = 更柔和、更扩散的阴影。为了自然外观，通常应该是偏移值的2-4倍。典型范围：0-50px。扩展半径（仅限box-shadow）：扩展（+）或收缩（-）阴影大小。正值使阴影大于元素，负值使其更小。用于创建环境发光效果而不影响元素布局。典型范围：-10px至20px。颜色：包括色调、饱和度、亮度和alpha（不透明度）。使用HSLA或RGBA格式。较低的不透明度（0.1-0.3）创建微妙的阴影，较高的不透明度（0.5-0.8）创建戏剧性/不自然的阴影。阴影类型：'outset'（默认）创建外部阴影，'inset'创建内部阴影以实现浮雕/压下外观（适用于表单输入、按下按钮）。所有值都可以通过滑块控件进行精确控制，并实时显示数值。

内阴影创建元素陷入页面的错觉（按下按钮、活动表单输入、雕刻文本）。使用'inset'关键字：box-shadow: inset X Y blur spread color;。对于按下按钮效果：使用小的负偏移（X: -2px，Y: -2px）从左上角创建阴影。添加轻微的模糊（2-4px）以获得柔和度。使用低不透明度（0.2-0.3）深色。与非内阴影组合用于未按下状态——在:active伪类上切换。对于表单输入焦点状态：内阴影（inset 0 0 0 3px rgba(...)）创建彩色边框/发光效果而不影响布局（比边框更适合过渡）。对于雕刻文本效果：在深色文本上使用带有正偏移的文本阴影（text-shadow: 1px 1px 1px rgba(255,255,255,0.5)）以获得凿刻外观。或者在浅色文本上使用负偏移。对于带有内容的卡片容器：内阴影可以在边缘创建晕影效果（inset 0 0 20px rgba(0,0,0,0.3)）。注意：内阴影不适用于text-shadow，仅适用于box-shadow。内阴影出现在元素边框内部，而不是外部。

绝对安全。所有阴影生成和预览完全在您的浏览器中使用客户端JavaScript和CSS本地进行。在设计过程中不会向任何服务器传输数据。您的阴影配置、颜色选择和设计参数永远不会离开您的设备。这种客户端架构确保敏感设计工作、专有UI系统和预发布产品设计的完全隐私。不会向外部服务发出网络请求，不对您的设计选择执行分析跟踪，并且不需要用户帐户或身份验证。与基于云的设计工具（Figma、Sketch、Adobe XD）将设计存储在云服务器上（可能对员工可访问或容易受到数据泄露的影响）不同，我们的工具将所有内容保留在本地。当您对阴影满意后，只需复制生成的CSS代码并将其粘贴到项目的样式表中。复制的代码仅包含标准CSS属性，没有专有格式或许可限制。为了在企业环境中获得额外的安全性，您可以离线使用此工具（一旦页面被缓存）或在气隙网络中使用。从概念到实现，您的创作过程完全保密。