CSS边框与阴影

### 边框与阴影

边框和阴影是 CSS 中用于增强视觉效果和层次感的重要属性。通过合理使用边框样式、边框圆角、盒阴影和文本阴影，可以使网页元素更加美观和突出。以下将详细介绍这些属性的使用方法和技巧。

------

#### 1. 边框样式（Border）

边框是围绕元素的矩形线条，可以通过多种属性来定义其样式。

##### （1）`border`

- **作用**：设置边框的宽度、样式和颜色。

- **语法**：

css复制

```css
  border: width style color;
  ```

- **示例**：

css复制

```css
  div {
      border: 2px solid red; /* 2像素宽，实线，红色 */
  }
  ```

##### （2）单独设置边框的每一部分

- `border-width`：设置边框的宽度。

- `border-style`：设置边框的样式（如 `solid`、`dashed`、`dotted`、`double`、`none`）。

- `border-color`：设置边框的颜色。

- **示例**：

css复制

```css
  div {
      border-width: 3px;
      border-style: dashed;
      border-color: blue;
  }
  ```

##### （3）分别设置上下左右边框

- **示例**：

css复制

```css
  div {
      border-top: 1px solid black;
      border-right: 2px dashed red;
      border-bottom: 3px double blue;
      border-left: 4px dotted green;
  }
  ```

------

#### 2. 边框圆角（Border Radius）

`border-radius` 属性用于创建圆角边框，使元素的边框变得圆滑。

##### （1）`border-radius`

- **作用**：定义边框的圆角半径。

- **语法**：

css复制

```css
  border-radius: value;
  ```

- 单个值：所有角的圆角半径相同。
  - 两个值：分别设置水平和垂直半径。
  - 四个值：分别设置左上角、右上角、右下角和左下角的圆角半径。

- **单位**：像素（`px`）、百分比（`%`）。

- **示例**：

css复制

```css
  div {
      border: 2px solid black;
      border-radius: 10px; /* 所有角的圆角半径为 10px */
  }
  ```

##### （2）创建圆形

- 如果 `border-radius` 的值等于元素宽度和高度的一半，元素会变成圆形。

- **示例**：

css复制

```css
  div {
      width: 100px;
      height: 100px;
      border: 2px solid black;
      border-radius: 50%; /* 圆形 */
  }
  ```

------

#### 3. 盒阴影（Box Shadow）

`box-shadow` 属性用于为元素添加阴影效果，增强层次感。

##### （1）`box-shadow`

- **作用**：为元素添加阴影。

- **语法**：

css复制

```css
  box-shadow: h-offset v-offset blur spread color;
  ```

- `h-offset`：水平偏移量（正数向右，负数向左）。
  - `v-offset`：垂直偏移量（正数向下，负数向上）。
  - `blur`：模糊半径（值越大，阴影越模糊）。
  - `spread`：阴影扩展半径（可选，正值扩展阴影，负值收缩阴影）。
  - `color`：阴影颜色。

- **示例**：

css复制

```css
  div {
      width: 200px;
      height: 100px;
      background: white;
      box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5); /* 水平偏移、垂直偏移、模糊半径、颜色 */
  }
  ```

##### （2）多重阴影

- 可以通过逗号分隔多个阴影值，为元素添加多重阴影。

- **示例**：

css复制

```css
  div {
      box-shadow: 
          5px 5px 10px rgba(0, 0, 0, 0.5),
          -5px -5px 10px rgba(255, 255, 255, 0.8); /* 内阴影效果 */
  }
  ```

------

#### 4. 文本阴影（Text Shadow）

`text-shadow` 属性用于为文本添加阴影效果，增强文本的视觉效果。

##### （1）`text-shadow`

- **作用**：为文本添加阴影。

- **语法**：

css复制

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

- `h-offset`：水平偏移量。
  - `v-offset`：垂直偏移量。
  - `blur`：模糊半径。
  - `color`：阴影颜色。

- **示例**：

css复制

```css
  h1 {
      color: white;
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* 水平偏移、垂直偏移、模糊半径、颜色 */
  }
  ```

##### （2）多重文本阴影

- 可以通过逗号分隔多个阴影值，为文本添加多重阴影。

- **示例**：

css复制

```css
  h1 {
      color: white;
      text-shadow: 
          2px 2px 4px rgba(0, 0, 0, 0.5),
          -2px -2px 4px rgba(255, 255, 255, 0.8);
  }
  ```

------

#### 5. 综合示例

HTML复制

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>边框与阴影示例</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
            margin: 20px;
        }
        .box {
            width: 300px;
            padding: 20px;
            margin: 20px auto;
            background: white;
            border: 2px solid #333;
            border-radius: 10px;
            box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
        }
        h1 {
            text-align: center;
            color: white;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
            background: #333;
            padding: 10px;
            border-radius: 5px;
        }
        p {
            font-size: 16px;
            line-height: 1.5;
            color: #333;
        }
    </style>
</head>
<body>
    <div class="box">
        <h1>欢迎来到我的网站</h1>
        <p>这是一个带有边框和阴影效果的盒子。边框样式、圆角和阴影可以增强视觉效果。</p>
    </div>
</body>
</html>
```

------

#### 6. 总结

- **边框样式**：
  - 使用 `border`、`border-width`、`border-style` 和 `border-color` 定义边框。
  - 使用 `border-radius` 创建圆角边框或圆形。
- **阴影效果**：
  - 使用 `box-shadow` 为元素添加阴影。
  - 使用 `text-shadow` 为文本添加阴影。

通过合理使用边框和阴影，可以为网页元素添加丰富的视觉效果，提升用户体验和界面美观度。