本文介绍一种通过嵌套容器模拟“内嵌圆角边框”的css技巧，解决单元素无法直接创建内侧圆角边框的问题，利用父容器与子容器的同心圆角叠加，实现视觉上类似内凹圆角的边界效果。

在CSS中，原生并不支持“内边框圆角”（inner border radius）这一概念——border-radius 只作用于元素外轮廓，而 border 本身不具备独立的圆角控制能力。当你尝试用 border-bottom: 50px solid #FF6559 配合 borderRadius 时，实际得到的是一个带直角底边的厚边框，无法形成你期望的内凹式圆角过渡效果（如第二张截图所示）。

正确解法是采用结构化嵌套 + 同心圆角设计：用父容器定义主色块与外层圆角，再用子容器（如 <header>）作为“内衬”，设置相同 border-radius 和浅色背景，从而在视觉上营造出“边缘向内收拢”的内嵌感。

以下是推荐实现方案：

Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries

规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...

下载

<div class="ticket">
  <header></header>
  <footer>Some text</footer>
</div>

.ticket {
  --border-radius: 1.5rem;
  background-color: #ff6559;     /* 主体色（即你想要的“内边框”颜色） */
  border-radius: var(--border-radius);
  max-width: 200px;
  overflow: hidden;              /* 关键：防止子元素溢出破坏圆角 */
}

.ticket > header {
  background-color: #d9d9d9;    /* 内容区背景色（模拟“内边”留白） */
  border-radius: var(--border-radius);
  min-height: 200px;
}

.ticket > footer {
  padding: 0.5rem;
  font-size: 1.5rem;
  color: white;
  text-align: center;
}

✅ 关键要点说明：

• overflow: hidden 必须添加到父容器 .ticket，确保子元素严格遵循父级圆角裁剪；
• 父子元素使用同一套 --border-radius 变量，保证几何对齐，避免错位；
• 若需调整“内边宽度”，可微调 header 的 padding 或额外包裹一层 div 控制内边距；
• 此方案完全响应式、无 hack、兼容所有现代浏览器（包括 Safari），且语义清晰、易于维护。

⚠️ 注意：不要试图用伪元素（如 ::before）或 box-shadow 模拟——它们难以精准匹配圆角弧度，且在高缩放或不同DPR设备下易出现像素级偏差。结构化嵌套才是稳健可靠的工程实践。