要实现一个既有圆角又有立体感的 div 边框，核心在于结合使用 CSS 的 border-radius 和 box-shadow 属性。border-radius 负责创建圆角，而 box-shadow 则通过模拟光影效果来营造立体感。

下面将分步详解如何实现，并提供几种不同效果的代码示例。

核心原理

1. 圆角 (border-radius)
   这个属性用于定义元素边框的圆角半径。值越大，圆角越明显。例如，border-radius: 12px; 会为元素的四个角都应用 12 像素的圆角。

2. 立体感 (box-shadow)
   这个属性用于为元素添加阴影。通过设置阴影的偏移、模糊和颜色，可以模拟出光源照射下的立体效果。

   • 基础语法: box-shadow: h-shadow v-shadow blur spread color;
   • h-shadow: 水平阴影位置（正值向右）。
   • v-shadow: 垂直阴影位置（正值向下）。
   • blur: 模糊半径，值越大阴影边缘越柔和。
   • spread: 阴影的扩展半径，正值会让阴影变大。
   • color: 阴影颜色，通常使用带透明度的 rgba 值，让效果更自然。

效果示例

1. 基础卡片效果

这是最常见和实用的效果，通过一个柔和的阴影让 div 看起来像是浮在页面之上。

<div class="card">这是一个具有基础立体感的圆角卡片</div>

.card {
  width: 300px;
  padding: 20px;
  background-color: #ffffff; /* 白色背景 */
  border-radius: 12px; /* 设置圆角 */
  /* 设置阴影：无水平偏移，向下偏移6px，模糊15px，颜色为半透明黑色 */
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.08);
  text-align: center;
}

2. 多层阴影增强立体感

通过叠加多个阴影，可以创造出更丰富、更有层次感的“悬浮”效果，让立体感更强。

<div class="card-deep">这是一个具有更强立体感的卡片</div>

.card-deep {
  width: 300px;
  padding: 20px;
  background-color: #ffffff;
  border-radius: 12px;
  /* 叠加两层阴影：一层近而实，一层远而虚 */
  box-shadow: 
    0 2px 6px rgba(0, 0, 0, 0.1), 
    0 8px 20px rgba(0, 0, 0, 0.15);
  text-align: center;
}

3. 内嵌立体效果

使用 inset 关键字可以创建内阴影，让元素看起来是凹陷下去的，而不是凸起的。

<div class="card-inset">这是一个具有内嵌立体感的卡片</div>

.card-inset {
  width: 300px;
  padding: 20px;
  background-color: #f0f0f0; /* 稍暗的背景色 */
  border-radius: 12px;
  /* 添加 inset 关键字创建内阴影 */
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.1);
  text-align: center;
}

4. 高级技巧：多重圆角边框

如果你需要实现多重边框且都带有圆角，可以结合 box-shadow 和 outline 属性。box-shadow 会跟随 border-radius，而 outline 不会，两者叠加可以形成有趣的视觉效果。

<div class="card-multi-border">这是一个具有多重边框的卡片</div>

.card-multi-border {
  width: 300px;
  padding: 20px;
  background-color: #fff;
  border-radius: 12px;
  /* 第一层：使用 box-shadow 的扩展半径创建紧贴元素的圆角边框 */
  box-shadow: 0 0 0 4px #4facfe; 
  /* 第二层：使用 outline 在外部创建第二层边框（注意：outline 不跟随圆角） */
  outline: 4px solid #00f2fe;
  text-align: center;
}

交互增强：悬停动画

为了让立体感更生动，可以为卡片添加鼠标悬停（hover）时的上浮动画。使用 transform 属性的性能优于直接改变 box-shadow。

.card {
  /* ... 其他基础样式 ... */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* 添加过渡效果 */
}

.card:hover {
  transform: translateY(-8px); /* 鼠标悬停时向上移动 */
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15); /* 同时加深阴影 */
}

通过以上方法的组合，你可以轻松创建出各种具有现代感和立体感的圆角 div 元素。