阴影生成器
预览效果
CSS 代码
当前预设: 自定义
5px
5px
10px
0px
20%
阴影属性说明
盒子阴影 (box-shadow)
盒子阴影属性用于在元素的框架周围添加阴影效果。
水平偏移
阴影的水平位置。正值将阴影置于元素右侧，负值将阴影置于元素左侧。
垂直偏移
阴影的垂直位置。正值将阴影置于元素下方，负值将阴影置于元素上方。
模糊半径
阴影的模糊程度。值越大，阴影越模糊。
扩散半径
阴影的大小。正值使阴影扩大，负值使阴影缩小。
内阴影
将阴影设置为内部阴影。默认情况下，阴影是外部阴影（outset）。
文字阴影 (text-shadow)
文字阴影属性用于为文本添加阴影效果。
水平偏移
阴影的水平位置。正值将阴影置于文本右侧，负值将阴影置于文本左侧。
垂直偏移
阴影的垂直位置。正值将阴影置于文本下方，负值将阴影置于文本上方。
模糊半径
阴影的模糊程度。值越大，阴影越模糊。
多重阴影
可以通过逗号分隔多个阴影值来创建多重阴影效果。
使用提示
- 使用预设可以快速应用常见的阴影效果
- 调整不透明度可以创建更柔和的阴影效果
- 内阴影（inset）可以创建凹陷或压印效果
- 负的扩散半径可以创建更精细的阴影边缘
- 文字阴影可以提高文本在不同背景上的可读性
- 尝试使用彩色阴影来创建更有趣的视觉效果