本文介绍一种通过嵌套容器模拟“内嵌圆角边框”的css技巧，解决单元素无法直接创建内侧圆角边框的问题，利用父容器与子容器的同心圆角叠加，实现视觉上类似内凹圆角的边界效果。
在CSS中，原生并不支持“内边框圆角”（inner border radius）这一概念——border-radius 只作用于元素外轮廓，而 border 本身不具备独立的圆角控制能力。当你尝试用 border-bottom: 50px solid #FF6559 配合 borderRadius 时，实际得到的是一个带直角底边的厚边框，无法形成你期望的内凹式圆角过渡效果（如第二张截图所示）。
正确解法是采用结构化嵌套 + 同心圆角设计：用父容器定义主色块与外层圆角，再用子容器（如 <header>）作为“内衬”，设置相同 border-radius 和浅色背景，从而在视觉上营造出“边缘向内收拢”的内嵌感。
以下是推荐实现方案：
<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设备下易出现像素级偏差。结构化嵌套才是稳健可靠的工程实践。
