CSS 盒阴影与圆角生成器

CSS 盒阴影与圆角生成器

🎨 免费 CSS 盒阴影与圆角生成器，支持实时预览。创建精美阴影、圆角与现代 UI 效果，一键复制即可用于网页设计。

Box Shadow 属性

CSS 的 box-shadow 属性会在元素边框周围添加阴影效果。你可以用逗号分隔设置多个效果。 盒阴影由相对元素的 X/Y 偏移、模糊半径、扩展半径以及颜色来描述。

语法： box-shadow: [inset] [x-offset] [y-offset] [blur-radius] [spread-radius] [color];

阴影参数

• X 偏移（水平）： 正值向右移动阴影，负值向左
• Y 偏移（垂直）： 正值向下移动阴影，负值向上
• 模糊半径： 数值越大越模糊；0 表示清晰阴影
• 扩展半径： 正值扩大阴影，负值缩小阴影
• 颜色： 任意 CSS 颜色值（hex、rgb、rgba、hsl）
• Inset： 将阴影变为内阴影，而非外阴影

Border Radius 属性

border-radius 属性用于将元素外边框的角变圆。你可以设置单一半径创建圆角，也可以设置两个半径创建椭圆角。

语法： border-radius: [top-left] [top-right] [bottom-right] [bottom-left];

常见使用场景

• 卡片： 轻微阴影 (0 4px 6px rgba(0,0,0,0.1)) + 中等圆角（8px）
• 按钮： 与按钮颜色匹配的彩色阴影，增强层次感
• 弹窗： 大阴影 (0 20px 25px rgba(0,0,0,0.15)) 呈现悬浮效果
• 图片： 圆形头像（border-radius: 50%）或圆角缩略图（8–16px）
• 输入框： 用内阴影呈现按下/聚焦状态
• 拟态风格： 多重阴影（亮/暗）搭配相同背景色

阴影最佳实践

• 使用轻微阴影： 10%–20% 不透明度通常足够呈现层次
• Y 偏移大于 X 偏移： 更符合从上方照射的自然光
• 更大模糊表示更高层级： 模糊越大，看起来离页面越“高”
• 匹配阴影颜色： 用元素颜色低透明度做阴影更协调
• 性能： 避免直接动画 box-shadow，优先使用 opacity 或 transform

流行阴影风格

• Material Design： 0 2px 4px rgba(0,0,0,0.2), 0 1px 2px rgba(0,0,0,0.14)
• Tailwind SM： 0 1px 2px 0 rgba(0,0,0,0.05)
• Tailwind MD： 0 4px 6px -1px rgba(0,0,0,0.1)
• Tailwind LG： 0 10px 15px -3px rgba(0,0,0,0.1)
• Bootstrap： 0 0.5rem 1rem rgba(0,0,0,0.15)

圆角常用模式

• 无（0px）： 直角，现代极简风
• 小（4px）： 适合输入框、按钮的轻微圆角
• 中（8px）： 卡片、容器的常用标准
• 大（16px+）： 更亲和、柔和的视觉风格
• 胶囊（999px 或 50%）： 标签、徽章两端圆润
• 圆形（50%）： 头像、图标按钮（需要正方形元素）

高级技巧

• 多重阴影： 组合多层阴影营造层次
• 发光效果： 0 0 20px [颜色] 且无偏移
• 拟态风格： 左上亮阴影 + 右下暗阴影
• 聚焦光圈： 用彩色阴影提升可访问性（0 0 0 3px rgba(颜色,0.5)）
• 3D 效果： 多层阴影，偏移与模糊逐步递增

浏览器支持

box-shadow 与 border-radius 在所有现代浏览器中均受支持。对于 IE8 及更早版本，可使用厂商前缀 （-webkit-box-shadow、-moz-box-shadow），但如今很少需要。

💡 小贴士： 悬停效果不要直接动画 box-shadow（开销较大）。建议把阴影放到伪元素（::before 或 ::after）上， 再动画它的不透明度。这样视觉效果相同但性能更好，尤其在移动设备上！