如何实现带圆角边框的内部透明div？

嗨，我看了你遇到的问题——你想做一个顶部有白色栏、下方是透明带白色圆角边框的容器，但现在顶部两个角落出现了不该有的深色缝隙对吧？这是因为你给inner-box设置了完整的8px圆角，它的顶部圆角会在top-bar下方露出来，而inner-box背景透明，就透出了深色的页面背景。

咱们来调整一下代码就能完美解决这个问题，核心思路是让顶部圆角效果由top-bar统一实现，下方的透明框只保留底部圆角，让两者完全无缝衔接：

修改后的完整可运行代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Basic HTML File</title>
</head>
<body>
    <div class="container">
        <div class="top-bar"></div>
        <div class="inner-box"></div>
    </div>
    <style>
        body {
            background-color: #222;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0; /* 移除浏览器默认边距，避免出现滚动条 */
        }
        .container {
            width: 300px;
            height: 400px;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            border-radius: 8px; /* 外层容器统一设置圆角 */
            overflow: hidden; /* 裁剪内部元素超出圆角的部分，实现无缝衔接 */
        }
        .top-bar {
            height: 40px;
            background-color: white;
            /* 无需单独设置顶部圆角，外层容器的overflow:hidden会自动裁剪 */
        }
        .inner-box {
            flex: 1;
            background-color: transparent;
            border: 2px solid white;
            /* 关键：只保留底部圆角，去掉顶部圆角让边框和top-bar完全贴合 */
            border-radius: 0 0 8px 8px;
            /* 移除顶部边框，避免top-bar下方出现双重边框 */
            border-top: none;
        }
    </style>
</body>
</html>

关键修改细节说明： #

• 外层容器统一管控圆角：给.container加上border-radius: 8px和overflow: hidden，这样整个容器的圆角效果由外层负责，内部元素不用单独处理顶部圆角，完美避免缝隙问题。
• 调整内部框的圆角与边框：把.inner-box的圆角改为仅底部生效（0 0 8px 8px），同时去掉顶部边框（border-top: none），确保它和top-bar的底部完全贴合，没有多余的边框或空隙。
• 优化基础样式：给body添加margin: 0消除浏览器默认边距，去掉了不必要的background-color: transparent（元素默认就是透明状态），让代码更简洁。

如果你不想依赖外层容器的overflow: hidden，也可以用另一种方式实现：保留top-bar的border-top-left-radius: 8px和border-top-right-radius: 8px，然后将.inner-box的border-top-left-radius和border-top-right-radius设为0，同时确保.inner-box和top-bar之间没有间距（flex布局下默认就没有），这样也能实现无缝衔接。不过用外层容器的方式更省心，后续调整整体样式也更方便。

测试一下修改后的代码，你会发现原来红箭头标注的深色缝隙完全消失了，整体效果和你预期的一致：顶部是白色圆角栏，下方是透明带白色圆角边框的区域，完美适配深色背景。

内容来源于stack exchange