创建倒置边框半径效果

问题：

可以倒置边框半径吗达到拐角处出现弯曲的效果向内？

答案：

原生 CSS 的 border-radius 属性不允许使用负值，否则会导致反向效果。不过，这里有一种使用 CSS 的替代方法：

在容器内添加四个附加元素，确保它们稍微超出其边界。这些元素应该与页面的背景颜色相匹配，从而产生下面页面内容的错觉。将这些元素战略性地放置在拐角处，并应用边框半径来实现反转效果。

代码片段：

#main {
    margin: 40px;
    height: 100px;
    background-color: #004C80;
    position: relative;
    overflow: hidden;
}

#main div {
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 100%;
    background-color: #FFF;
}

.top { top: -10px; }
.bottom { bottom: -10px; }
.left { left: -10px; }
.right { right: -10px; }