創建倒置邊框半徑效果

創建倒置邊框半徑效果

問題：

答案：

原生 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; }

#main { 邊距：40 像素； 高度：100px； 背景顏色：#004C80； 位置：相對； 溢出：隱藏； } #主分割區{ 位置：絕對； 寬度：20px； 高度：20px； 邊界半徑：100%； 背景顏色：#FFF； } .top { 頂部：-10px; } .bottom { 底部：-10px; } .left { 左：-10px; } .right { 右：-10px; }