CSS阴影

CSS阴影允许你为元素添加阴影效果，增强元素的视觉层次感和立体感。CSS提供了两种主要的阴影效果：文本阴影和盒阴影。

文本阴影 (text-shadow)

文本阴影用于为文本添加阴影效果。

基础语法

css

.element {
  text-shadow: h-shadow v-shadow blur-radius color;
}

参数说明：

h-shadow：水平阴影的位置，可以是正值（向右）或负值（向左）
v-shadow：垂直阴影的位置，可以是正值（向下）或负值（向上）
blur-radius：可选，模糊半径，值越大阴影越模糊
color：可选，阴影的颜色

基本示例

css

/* 简单文本阴影 */
.element {
  text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

/* 无模糊效果的文本阴影 */
.element {
  text-shadow: 2px 2px 0px red;
}

/* 多阴影效果 */
.element {
  text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}

盒阴影 (box-shadow)

盒阴影用于为元素的盒子模型添加阴影效果。

基础语法

css

.element {
  box-shadow: h-shadow v-shadow blur-radius spread-radius color inset;
}

参数说明：

h-shadow：水平阴影的位置，可以是正值（向右）或负值（向左）
v-shadow：垂直阴影的位置，可以是正值（向下）或负值（向上）
blur-radius：可选，模糊半径，值越大阴影越模糊
spread-radius：可选，阴影的扩展半径，正值会扩大阴影，负值会缩小阴影
color：可选，阴影的颜色
inset：可选，将阴影设置为内部阴影（默认是外部阴影）

基本示例

css

/* 简单盒阴影 */
.element {
  box-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

/* 带有扩展半径的盒阴影 */
.element {
  box-shadow: 2px 2px 4px 6px rgba(0,0,0,0.3);
}

/* 内部阴影 */
.element {
  box-shadow: inset 2px 2px 4px rgba(0,0,0,0.5);
}

/* 多阴影效果 */
.element {
  box-shadow: 
    0 4px 8px 0 rgba(0,0,0,0.2),
    0 6px 20px 0 rgba(0,0,0,0.19);
}

/* 内外部同时有阴影 */
.element {
  box-shadow: 
    inset 0 0 10px rgba(0,0,0,0.3),
    0 4px 8px rgba(0,0,0,0.2);
}

阴影颜色

阴影颜色可以使用任何CSS颜色表示方法，包括十六进制、RGB、RGBA、HSL、HSLA等。使用RGBA或HSLA可以设置阴影的透明度。

css

.element {
  /* 使用十六进制 */
  text-shadow: 2px 2px 4px #000000;
  
  /* 使用RGB */
  box-shadow: 2px 2px 4px rgb(0, 0, 0);
  
  /* 使用RGBA（带透明度） */
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  
  /* 使用HSLA */
  box-shadow: 2px 2px 4px hsla(0, 0%, 0%, 0.5);
}

阴影与过渡

将阴影与CSS过渡结合使用，可以创建平滑的悬停效果。

css

.button {
  background-color: blue;
  color: white;
  padding: 10px 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  transition: box-shadow 0.3s ease;
}

.button:hover {
  box-shadow: 0 4px 8px rgba(0,0,0,0.4);
}

阴影应用场景

卡片效果

css

.card {
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

按钮效果

css

.button {
  background-color: #4CAF50;
  color: white;
  padding: 12px 24px;
  border: none;
  border-radius: 4px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  cursor: pointer;
  transition: box-shadow 0.3s ease;
}

.button:hover {
  box-shadow: 0 6px 12px rgba(0,0,0,0.2);
}

.button:active {
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
  transform: translateY(2px);
}

悬浮效果

css

.hover-card {
  background-color: white;
  padding: 20px;
  transition: all 0.3s ease;
}

.hover-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

浏览器兼容性

文本阴影和盒阴影在现代浏览器中有很好的支持：

text-shadow：IE 10+，所有现代浏览器
box-shadow：IE 9+，所有现代浏览器

对于旧版本浏览器的支持，可以考虑使用JavaScript库或回退方案。

性能考虑

复杂的阴影效果可能会影响性能，特别是在移动设备上
避免在大量元素上使用复杂的阴影
使用硬件加速可以提高阴影性能

css

.element {
  transform: translateZ(0); /* 启用硬件加速 */
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}