如何绘制圆角边框/阴影框/图片边框等特殊图形

在 CSS 中，利用一些常见的属性，我们可以轻松绘制出圆角边框、阴影框以及图片边框等特殊效果，这些效果在现代网页设计中广泛应用，能够提高页面的视觉效果和用户体验。

1. 圆角边框

通过使用 border-radius 属性，我们可以实现圆角效果。border-radius 可以单独设置四个角的圆角半径，也可以统一设置所有角的圆角半径。

1.1 圆角边框的基本应用

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .box {
      width: 200px; /* 设置盒子的宽度 */
      height: 100px; /* 设置盒子的高度 */
      background-color: lightblue; /* 设置背景颜色 */
      border-radius: 15px; /* 设置圆角半径 */
      border: 2px solid #000; /* 设置边框 */
    }
  </style>
  <title>圆角边框示例</title>
</head>
<body>
  <div class="box">
    这是一个圆角边框的盒子
  </div>
</body>
</html>

详细解释：

border-radius: 15px;：将盒子的四个角都设置为圆角，半径为 15px。
盒子的其他样式包括设置宽度、高度、背景颜色和边框，形成了一个具有圆角效果的盒子。

1.2 不同角设置不同圆角

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .box {
      width: 200px;
      height: 100px;
      background-color: lightgreen;
      border: 2px solid #000;
      border-top-left-radius: 30px; /* 设置左上角圆角 */
      border-top-right-radius: 10px; /* 设置右上角圆角 */
      border-bottom-left-radius: 5px; /* 设置左下角圆角 */
      border-bottom-right-radius: 25px; /* 设置右下角圆角 */
    }
  </style>
  <title>不同角圆角示例</title>
</head>
<body>
  <div class="box">
    这是具有不同圆角的盒子
  </div>
</body>
</html>

详细解释：

border-top-left-radius: 30px;：设置左上角的圆角半径为 30px。
border-top-right-radius: 10px;：设置右上角的圆角半径为 10px。
border-bottom-left-radius: 5px;：设置左下角的圆角半径为 5px。
border-bottom-right-radius: 25px;：设置右下角的圆角半径为 25px。

通过这种方式，我们可以为每个角单独设置不同的圆角半径，创建更加复杂的圆角效果。

2. 阴影框

使用 box-shadow 属性，我们可以给元素添加阴影效果，常用于创建浮动感、深度感和立体感。

2.1 基本阴影效果

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .box {
      width: 200px;
      height: 100px;
      background-color: lightcoral;
      border: 2px solid #000;
      box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.3); /* 设置阴影 */
    }
  </style>
  <title>基本阴影效果</title>
</head>
<body>
  <div class="box">
    这是带有阴影的盒子
  </div>
</body>
</html>

详细解释：

box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.3);：
- 10px：阴影的水平偏移。
- 10px：阴影的垂直偏移。
- 15px：阴影的模糊半径，数值越大阴影越模糊。
- rgba(0, 0, 0, 0.3)：阴影的颜色，rgba 中的 0.3 是透明度，表示阴影的透明度。

2.2 内阴影效果

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .box {
      width: 200px;
      height: 100px;
      background-color: lightyellow;
      border: 2px solid #000;
      box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5); /* 设置内阴影 */
    }
  </style>
  <title>内阴影效果</title>
</head>
<body>
  <div class="box">
    这是带有内阴影的盒子
  </div>
</body>
</html>

详细解释：

box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);：
- inset：表示阴影是内阴影，即阴影会出现在元素内部。
- 0 0：分别表示水平和垂直偏移量，0 表示没有偏移。
- 10px：模糊半径，表示阴影的模糊程度。
- rgba(0, 0, 0, 0.5)：设置阴影颜色和透明度。

3. 图片边框

使用 CSS 可以给图片添加不同样式的边框，比如实线边框、圆角边框、阴影等。

3.1 圆角图片边框

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .image {
      width: 300px; /* 设置图片的宽度 */
      height: 200px; /* 设置图片的高度 */
      border: 5px solid #000; /* 设置边框 */
      border-radius: 20px; /* 设置圆角 */
    }
  </style>
  <title>圆角图片边框</title>
</head>
<body>
  <img src="https://via.placeholder.com/300x200" class="image" alt="示例图片">
</body>
</html>

详细解释：

border: 5px solid #000;：为图片添加了 5px 的黑色实线边框。
border-radius: 20px;：设置圆角效果，使图片的四个角变为圆角。

3.2 带阴影的图片边框

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .image {
      width: 300px;
      height: 200px;
      border: 5px solid #000;
      border-radius: 15px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 添加阴影 */
    }
  </style>
  <title>带阴影的图片边框</title>
</head>
<body>
  <img src="https://via.placeholder.com/300x200" class="image" alt="示例图片">
</body>
</html>

详细解释：