如何用纯CSS和HTML制作带内嵌圆形的圆角阴影盒子

直接给你可行的代码实现，核心是利用CSS的border和border-radius属性，结合嵌套结构实现环形区域、红色边框和阴影效果：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Shadow Card with Circle</title>
  <style>
    /* 外层盒子样式 */
    .card {
      width: 300px;
      height: 400px;
      border-radius: 16px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      background-color: #ffffff;
      padding: 24px;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    /* 环形区域容器 */
    .circle-wrapper {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      padding: 6px; /* 这个值控制环形区域的宽度 */
      background-color: #f0f0f0; /* 环形区域的颜色 */
      margin-bottom: 20px;
    }

    /* 带红色边框的圆形 */
    .circle {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background-color: #ffffff;
      border: 3px solid #ff3333; /* 红色圆角边框，因为元素是圆形，边框自动变成圆角 */
      box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05); /* 可选：圆形内部阴影增强质感 */
    }
  </style>
</head>
<body>
  <div class="card">
    <div class="circle-wrapper">
      <div class="circle"></div>
    </div>
    <!-- 这里可以添加盒子内部的其他内容 -->
    <p>盒子内部内容示例</p>
  </div>
</body>
</html>

关键细节说明： #

• 红色圆角边框：给内层.circle元素设置border: 3px solid #ff3333，同时配合border-radius: 50%，边框会自动贴合圆形轮廓，实现红色圆角边框效果。
• 环形区域：通过.circle-wrapper的padding和background-color实现——padding的大小就是环形的宽度，背景色就是环形的颜色，内层圆形的背景色和盒子背景色一致，就会形成环形视觉效果。
• 阴影层次：外层盒子、环形容器、内层圆形分别设置了box-shadow，可以根据需求调整阴影的模糊度、偏移量和颜色，增强整体立体感。
• 自定义调整：你可以修改.circle-wrapper的padding值改变环形宽度，调整border的宽度和颜色改变红色边框样式，修改border-radius的值调整盒子圆角大小。

内容的提问来源于stack exchange，提问作者Mossawir Ahmed