css中的阴影详解

news2025/1/16 22:45:52

在 CSS 中，阴影效果通常使用 box-shadow 和 text-shadow 来实现，它们分别适用于元素的框和文本。阴影是提升页面设计感和层次感的重要工具。下面，我会详细讲解这两个属性，并结合代码示例说明。

1. `box-shadow`

box-shadow 用于为元素的框添加阴影效果，语法如下：

box-shadow: h-offset v-offset blur spread color inset;

h-offset（水平偏移）：阴影相对于元素的水平位置。正值表示阴影在元素的右侧，负值表示阴影在左侧。
v-offset（垂直偏移）：阴影相对于元素的垂直位置。正值表示阴影在元素的下方，负值表示阴影在上方。
blur（模糊半径）：控制阴影的模糊程度，值越大，阴影越模糊。默认为 0，表示没有模糊。
spread（扩展半径）：控制阴影的大小，正值表示阴影会扩展，负值表示阴影会收缩。
color（颜色）：阴影的颜色，可以使用任何合法的颜色值（如 rgba, #hex, rgb 等）。
inset（内阴影，可选）：表示阴影是内嵌在元素内部的。如果不指定，阴影会在元素外部。

示例

<div class="box-shadow-example">盒子阴影</div>

<style>
  .box-shadow-example {
    width: 200px;
    height: 100px;
    background-color: #4CAF50;
    color: white;
    line-height: 100px;
    text-align: center;
    box-shadow: 10px 10px 20px 5px rgba(0, 0, 0, 0.5);
  }
</style>

box-shadow: 10px 10px 20px 5px rgba(0, 0, 0, 0.5);:
- 10px：水平偏移 10 像素，阴影向右。
- 10px：垂直偏移 10 像素，阴影向下。
- 20px：模糊半径 20 像素，阴影会变得模糊。
- 5px：扩展半径 5 像素，阴影会稍微增大。
- rgba(0, 0, 0, 0.5)：阴影的颜色为半透明黑色。

2. `text-shadow`

text-shadow 用于为文本添加阴影效果，语法如下：

text-shadow: h-offset v-offset blur color;

h-offset（水平偏移）：阴影相对于文本的水平位置，正值向右偏移，负值向左偏移。
v-offset（垂直偏移）：阴影相对于文本的垂直位置，正值向下偏移，负值向上偏移。
blur（模糊半径）：控制阴影的模糊程度，值越大，阴影越模糊。
color（颜色）：阴影的颜色。

示例

<h1 class="text-shadow-example">带阴影的文本</h1>

<style>
  .text-shadow-example {
    font-size: 50px;
    text-align: center;
    text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
  }
</style>

text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);:
- 3px：水平偏移 3 像素，阴影向右。
- 3px：垂直偏移 3 像素，阴影向下。
- 5px：模糊半径 5 像素，阴影稍微模糊。
- rgba(0, 0, 0, 0.3)：阴影的颜色为半透明黑色。

3. 多重阴影

box-shadow 和 text-shadow 都可以同时应用多个阴影，多个阴影使用逗号分隔。每个阴影的语法遵循相同的规则。

示例

<div class="multi-shadow-example">多重阴影效果</div>

<style>
  .multi-shadow-example {
    width: 200px;
    height: 100px;
    background-color: #ff6347;
    color: white;
    line-height: 100px;
    text-align: center;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3), -5px -5px 10px rgba(0, 0, 0, 0.1);
  }
</style>

box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3), -5px -5px 10px rgba(0, 0, 0, 0.1);:
- 第一个阴影：偏移 5px 向右下方，模糊半径为 10px，半透明黑色。
- 第二个阴影：偏移 -5px 向左上方，模糊半径为 10px，浅色阴影。

4. 内阴影

box-shadow 还可以应用内阴影（inset），它会使阴影出现在元素内部。

示例

<div class="inset-shadow-example">内阴影效果</div>

<style>
  .inset-shadow-example {
    width: 200px;
    height: 100px;
    background-color: #87cefa;
    color: black;
    line-height: 100px;
    text-align: center;
    box-shadow: inset 5px 5px 15px rgba(0, 0, 0, 0.4);
  }
</style>

box-shadow: inset 5px 5px 15px rgba(0, 0, 0, 0.4);:
- inset：使阴影呈内阴影，阴影在元素内部。
- 5px 5px：阴影向右下方偏移 5 像素。
- 15px：模糊半径为 15 像素，阴影较为模糊。
- rgba(0, 0, 0, 0.4)：阴影颜色为半透明黑色。