CSS 阴影与圆角

学习 box-shadow 和 border-radius · 难度：入门 · +10XP

CSS 阴影与圆角效果

阴影和圆角是现代 Web 设计中最常用的视觉效果之一。CSS 提供了 box-shadow 和 text-shadow 两个属性来创建阴影，配合 border-radius 圆角属性，可以轻松打造出精美的 UI 效果。

盒子阴影 box-shadow

box-shadow 为元素框添加阴影。可以设置多个阴影，用逗号分隔。语法为：h-offset v-offset blur spread color inset。

/* 基本阴影 */
.card {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
/* 大阴影 - 浮动效果 */
.card:hover {
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
  transform: translateY(-2px);
  transition: all 0.3s ease;
}
/* 彩色阴影 */
.colorful {
  box-shadow: 0 4px 15px rgba(255, 107, 107, 0.4);
}
/* 多层阴影 */
.multi-shadow {
  box-shadow:
    0 1px 3px rgba(0,0,0,0.12),
    0 1px 2px rgba(0,0,0,0.24);
}
/* 内阴影 */
.inset {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}
/* 扩散阴影 - 四周均匀 */
.spread {
  box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5);
}

文字阴影 text-shadow

text-shadow 为文字添加阴影效果，常用于标题设计。语法：h-offset v-offset blur color。

h1 {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}
/* 发光文字 */
.glow {
  color: #fff;
  text-shadow: 0 0 10px #00bcd4, 0 0 20px #00bcd4;
}
/* 浮雕效果 */
.emboss {
  color: #ccc;
  text-shadow: -1px -1px 0 #fff, 1px 1px 0 #333;
}
/* 3D 立体文字 */
.three-d {
  color: #fff;
  text-shadow: 1px 1px 0 #bbb, 2px 2px 0 #999, 3px 3px 0 #777;
}

圆角 border-radius

border-radius 虽然不属于阴影属性，但常与阴影搭配使用，打造现代卡片风格。

/* 统一圆角 */
.card {
  border-radius: 12px;
}
/* 分别设置四角 */
.custom-radius {
  border-radius: 10px 20px 10px 20px;  /* 左上 右上 右下 左下 */
}
/* 正圆形 */
.avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
}
/* 胶囊 / 药丸形状 */
.badge {
  border-radius: 999px;
  padding: 4px 12px;
}

阴影参数说明表

参数	说明	示例
h-offset	水平偏移（正值向右，负值向左）	5px
v-offset	垂直偏移（正值向下，负值向上）	5px
blur	模糊半径（值越大越模糊）	10px
spread	扩散半径（值越大阴影越大）	2px
color	阴影颜色（通常用 rgba）	rgba(0,0,0,0.2)
inset	可选，将外阴影变为内阴影	inset

常用阴影效果速查

效果	css 代码
轻微浮起	box-shadow: 0 2px 8px rgba(0,0,0,0.1)
明显浮起	box-shadow: 0 10px 30px rgba(0,0,0,0.2)
Material 风格	box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23)
内凹效果	box-shadow: inset 0 2px 5px rgba(0,0,0,0.1)
聚焦环	box-shadow: 0 0 0 3px rgba(66,153,225,0.5)

???? 练习

1. 创建一个带阴影的卡片组件，hover 时阴影变大并微微上移
2. 使用 text-shadow 制作一个发光的霓虹灯文字效果
3. 用 box-shadow: inset 制作一个内凹的输入框效果
4. 组合使用 border-radius 和 box-shadow 制作一个精美的按钮
5. 尝试用多层阴影叠加出更自然的阴影层次