css设置阴影效果

CSS 设置阴影效果是一种常见的视觉增强技术，用于为网页元素添加立体感和深度。阴影效果可以通过 box-shadow 和 text-shadow 属性来实现。

基础概念

box-shadow:
- 用于为元素块添加阴影效果。
- 语法：box-shadow: h-offset v-offset blur spread color inset;
  - h-offset: 水平偏移量，正值向右，负值向左。
  - v-offset: 垂直偏移量，正值向下，负值向上。
  - blur: 模糊半径，越大越模糊。
  - spread: 扩展半径，正值扩大阴影，负值缩小阴影。
  - color: 阴影颜色。
  - inset: 可选，内阴影。

text-shadow:
- 用于为文本添加阴影效果。
- 语法：text-shadow: h-offset v-offset blur color;
  - h-offset: 水平偏移量。
  - v-offset: 垂直偏移量。
  - blur: 模糊半径。
  - color: 阴影颜色。

类型

外阴影：通过 box-shadow 和 text-shadow 的默认设置实现。
内阴影：通过 box-shadow 的 inset 属性实现。

应用场景

按钮和卡片：为按钮和卡片添加阴影效果，使其看起来更立体。
文本突出：为标题或重要文本添加阴影，使其更加突出。
布局分隔：使用阴影来分隔不同的内容区域。

示例代码

外阴影示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Box Shadow Example</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: #f0f0f0;
            box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.3);
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

内阴影示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Box Shadow Example</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: #f0f0f0;
            box-shadow: inset 10px 10px 5px rgba(0, 0, 0, 0.3);
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

文本阴影示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Text Shadow Example</title>
    <style>
        h1 {
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
        }
    </style>
</head>
<body>
    <h1>Hello, World!</h1>
</body>
</html>