Web学习网站

Appearance

CSS 阴影效果 ​

CSS 阴影效果可以为元素添加深度和立体感，使网页设计更加生动和现代。CSS 提供了两种主要的阴影属性：box-shadow 用于元素盒子阴影，text-shadow 用于文本阴影。

盒子阴影 (Box Shadow) ​

基本语法 ​

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

参数说明：

  • h-offset：水平偏移量（必需）
  • v-offset：垂直偏移量（必需）
  • blur：模糊半径（可选）
  • spread：扩展半径（可选）
  • color：阴影颜色（可选）
  • inset：内阴影关键字（可选）

基本阴影效果 ​

css
/* 简单阴影 */
.simple-shadow {
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}

/* 水平阴影 */
.horizontal-shadow {
  box-shadow: 5px 0 5px rgba(0, 0, 0, 0.2);
}

/* 垂直阴影 */
.vertical-shadow {
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
}

/* 无偏移阴影 */
.no-offset-shadow {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

模糊和扩展 ​

css
/* 模糊阴影 */
.blurred-shadow {
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
}

/* 锐利阴影 */
.sharp-shadow {
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.3);
}

/* 扩展阴影 */
.spread-shadow {
  box-shadow: 2px 2px 5px 10px rgba(0, 0, 0, 0.2);
}

/* 负扩展阴影 */
.negative-spread-shadow {
  box-shadow: 2px 2px 5px -5px rgba(0, 0, 0, 0.3);
}

内阴影 ​

css
.inner-shadow {
  box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.3);
}

/* 多个内阴影 */
.multiple-inner-shadow {
  box-shadow: 
    inset 2px 2px 5px rgba(0, 0, 0, 0.3),
    inset -2px -2px 5px rgba(255, 255, 255, 0.8);
}

多重阴影 ​

css
.multiple-shadow {
  box-shadow: 
    0 2px 4px rgba(0, 0, 0, 0.1),
    0 4px 8px rgba(0, 0, 0, 0.1),
    0 8px 16px rgba(0, 0, 0, 0.1);
}

/* 彩色多重阴影 */
.colorful-shadow {
  box-shadow: 
    0 0 5px red,
    0 0 10px blue,
    0 0 15px green;
}

阴影颜色 ​

css
/* 使用十六进制颜色 */
.hex-shadow {
  box-shadow: 2px 2px 5px #333333;
}

/* 使用 RGBA 颜色 */
.rgba-shadow {
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}

/* 使用 HSLA 颜色 */
.hsla-shadow {
  box-shadow: 2px 2px 5px hsla(0, 0%, 0%, 0.5);
}

文本阴影 (Text Shadow) ​

基本语法 ​

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

参数说明：

  • h-offset：水平偏移量（必需）
  • v-offset：垂直偏移量（必需）
  • blur：模糊半径（可选）
  • color：阴影颜色（可选）

基本文本阴影 ​

css
/* 简单文本阴影 */
.simple-text-shadow {
  text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.3);
}

/* 水平文本阴影 */
.horizontal-text-shadow {
  text-shadow: 5px 0 3px rgba(0, 0, 0, 0.2);
}

/* 垂直文本阴影 */
.vertical-text-shadow {
  text-shadow: 0 5px 3px rgba(0, 0, 0, 0.2);
}

/* 无偏移文本阴影 */
.no-offset-text-shadow {
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

模糊文本阴影 ​

css
/* 轻微模糊 */
.light-blur-text-shadow {
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

/* 强烈模糊 */
.strong-blur-text-shadow {
  text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
}

/* 无模糊 */
.no-blur-text-shadow {
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.3);
}

多重文本阴影 ​

css
/* 多重阴影 */
.multiple-text-shadow {
  text-shadow: 
    1px 1px 2px rgba(0, 0, 0, 0.3),
    2px 2px 4px rgba(0, 0, 0, 0.2),
    3px 3px 6px rgba(0, 0, 0, 0.1);
}

/* 彩色文本阴影 */
.colorful-text-shadow {
  text-shadow: 
    1px 1px 2px red,
    -1px -1px 2px blue;
}

特殊文本效果 ​

css
/* 发光效果 */
.glow-text {
  text-shadow: 
    0 0 5px #fff,
    0 0 10px #fff,
    0 0 15px #3498db,
    0 0 20px #3498db;
  color: #3498db;
}

/* 浮雕效果 */
.embossed-text {
  text-shadow: 
    -1px -1px 0 #fff,
    1px 1px 0 #000;
  color: #666;
}

/* 3D 效果 */
.3d-text {
  text-shadow: 
    1px 1px 0 #ccc,
    2px 2px 0 #ccc,
    3px 3px 0 #ccc;
  color: #333;
}

实际应用示例 ​

卡片阴影效果 ​

html
<div class="card">卡片内容</div>
css
.card {
  padding: 20px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  margin: 20px;
}

悬停阴影效果 ​

html
<div class="hover-card">悬停卡片</div>
css
.hover-card {
  padding: 20px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s ease;
}

.hover-card:hover {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

按钮阴影效果 ​

html
<button class="shadow-button">阴影按钮</button>
css
.shadow-button {
  padding: 12px 24px;
  background: #3498db;
  color: white;
  border: none;
  border-radius: 4px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: all 0.3s ease;
}

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

.shadow-button:active {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transform: translateY(0);
}

内阴影输入框 ​

html
<input type="text" class="inner-shadow-input" placeholder="内阴影输入框">
css
.inner-shadow-input {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
  outline: none;
}

.inner-shadow-input:focus {
  box-shadow: 
    inset 0 1px 3px rgba(0, 0, 0, 0.1),
    0 0 5px rgba(52, 152, 219, 0.5);
}

文本发光效果 ​

html
<h1 class="glowing-text">发光文本</h1>
css
.glowing-text {
  text-shadow: 
    0 0 5px #fff,
    0 0 10px #fff,
    0 0 15px #3498db,
    0 0 20px #3498db,
    0 0 25px #3498db;
  color: #3498db;
  font-size: 2.5rem;
  text-align: center;
}

头像阴影 ​

html
<div class="avatar">头像</div>
css
.avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #3498db;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
  box-shadow: 
    0 5px 15px rgba(0, 0, 0, 0.2),
    0 0 0 5px rgba(52, 152, 219, 0.3);
}

模态框阴影 ​

html
<div class="modal">模态框内容</div>
css
.modal {
  padding: 30px;
  background: white;
  border-radius: 8px;
  box-shadow: 
    0 10px 25px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(0, 0, 0, 0.1);
  max-width: 500px;
  margin: 50px auto;
}

浏览器兼容性 ​

  • box-shadow: IE9+ 支持
  • text-shadow: IE10+ 支持
  • 需要添加浏览器前缀以支持较老的浏览器

性能优化 ​

  1. 避免过度使用：过多的阴影会影响页面渲染性能
  2. 使用 transform 代替 box-shadow 进行动画：在动画中使用 transform 比改变 box-shadow 性能更好
  3. 合理使用模糊值：过大的模糊值会增加渲染负担
  4. 避免复杂的多重阴影：特别是在需要频繁重绘的元素上

最佳实践 ​

  1. 适度使用：阴影应该增强设计而不是分散注意力
  2. 保持一致性：在整个网站中使用一致的阴影风格
  3. 考虑可访问性：确保阴影不会影响内容的可读性
  4. 响应式设计：在不同设备上调整阴影效果
  5. 测试性能：在目标设备上测试阴影效果的性能

总结 ​

CSS 阴影效果为网页设计提供了增强视觉层次和深度的重要工具。通过合理使用 [box-shadow](file:///Users/jry/Documents/WWW/xyito/lingyun/webstudy/node_modules/.vitepress/cache/deps/vue.js) 和 [text-shadow](file:///Users/jry/Documents/WWW/xyito/lingyun/webstudy/node_modules/.vitepress/cache/deps/vue.js) 属性，可以创建各种视觉效果，从简单的阴影到复杂的发光效果。掌握这些技术对于现代 Web 开发非常重要。