CSS佈局之道——內凹圓角

一、 效果圖

先來看一下效果圖：

二、 實現

1. 場景

看上圖，此類場景應該很是常用吧，比如賬單、卡片、列表等。

2. 實現思路

看到效果圖，能想到的實現方法則是

• planA：border-radius直接搞起來
• planB：定位

但是細想之後發現兩者皆不可用，border-radius處理的話是凸角，捨棄；定位需要獨立出來兩個模塊，複雜度高了，捨棄。
可是捨棄後，需要怎麼做呢？切背景圖嗎？顯然不合理，如果內容不固定，則模塊的長度也不一樣，背景圖也會拉伸；思來想去，還是得從定位上做文章：既然元素多比較複雜，那就直接在僞類上動手。
可能大家猜到了，就是直接在::before、::after上模擬出來。

三、 代碼

1. 基礎佈局

<!-- html：隨便一些div -->
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

body{
    margin: 0;
    background: #000;
    padding: 20px 0;
}
div{
    width: 80vw;
    min-height: 15vh;
    background: #666;
    border-radius: 6px;
    margin: 0 auto;
    position: relative;
    border-top: 1px dashed #333;
}
div:first-child{
    border: none;
}

2. 僞類

基礎佈局出來後，怎麼利用僞類處理呢？思路是這樣的：

1. 利用僞類畫出來一個與主題背景色一樣的圓；
2. 定位，向左(右)偏移圓自身的一半，視覺效果就是半個圓在上面；
3. 繼續定位，向上繼續偏移小球的一半，視覺效果則是每個模塊有個四分之一內凹圓角一樣。

知道思路後，就繼續實現吧：

div::before,div::after{
    content: '';
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #000;
    position: absolute;
    z-index: 999;
}
div::before{
    left: -10px;
    top: -10px;
}
div::after{
    right: -10px;
    top: -10px;
}
div:first-child::before,div:first-child::after{
    content: '';
    width: 0;
    height: 0;
}

這樣就完成了~