轉自:csdn

圓角，大家一定都會做，border-radius, 內凹圓角如何實現(xiàn)？

可以拿個白色圓盒子蓋住方形盒子的大半邊實現(xiàn)，但是這樣，是不透明的，背景發(fā)生改變時，就要改遮蓋盒子的顏色，或者背景是漸變，改起來更麻煩，或背景是圖片等等，就直接不太好改了，這種方法就有局限性。 說白了就是遮蓋的那部分不透明以后，自適應性不強。

這里介紹一個用徑向漸變實現(xiàn)的內凹圓角，可以解決上述問題。可以用CSS生成一個背景透明的內凹圓角。

1. 基本線性漸變

div {
    height: 100px;
    width: 200px;
    background-image: linear-gradient(90deg, red, blue);
}

<div>從左到右的紅到藍漸變</div>1

2. 加百分比調整漸變范圍

div {
    height: 100px;
    width: 200px;
    background-image: linear-gradient(90deg, red 20%, blue 80%);
}

<div></div>

3. 濃縮漸變范圍，直至重合，形成一個紅藍分隔的兩個色塊

div {
    height: 100px;
    width: 200px;
    background-image: linear-gradient(90deg, red 50%, blue 50%);
}

<div></div>

4. 顏色是可以設置透明色的，transparent, 將紅色改成透明色，可以看到只有藍色的色塊了。

div {
   height: 100px;
   width: 200px;
   background-image: linear-gradient(90deg, transparent 50%, blue 50%);
}

<div></div>

5. 同理聯(lián)想到徑向漸變，同樣縮小漸變圈，直至重合，靠近圓心的顏色設成transparent。

/* 徑向漸變主體 */

.raidal {
    height: 100px;
    width: 100px;
    background:radial-gradient(transparent 50%,blue 50%);
}

<div class='raidal'></div>

6. 徑向漸變是可以設置半徑圓心位置的，所以設到左頂角，left top 調整半徑大小為 200px，就發(fā)現(xiàn)背景透明的內凹圓角實現(xiàn)了。

應用時可以用偽元素設置，然后用絕對定位，子絕父相，調整位置，組合成想要的效果

/* 徑向漸變主體 */
.raidal1 {
    height: 100px;
    width: 100px;
    background:radial-gradient(200px at left top,transparent 50%,blue 50%);
}

<div class='raidal1'></div>

7. 同理四個方向, 調整圓心位置即可

/* 左上 */
.raidal1 {
    height: 100px;
    width: 100px;
    background:radial-gradient(200px at left top,transparent 50%,blue 50%);
}

/* 右上 */
.raidal2 {
    height: 100px;
    width: 100px;
    background:radial-gradient(200px at right top,transparent 50%,blue 50%);
}

/* 右下 */
.raidal3 {
    height: 100px;
    width: 100px;
    background:radial-gradient(200px at right bottom,transparent 50%,blue 50%);
}

/* 左下 */
.raidal4 {
    height: 100px;
    width: 100px;
    background:radial-gradient(200px at left bottom,transparent 50%,blue 50%);
}

<div class='raidal1'></div>
<div class='raidal2'></div>
<div class='raidal3'></div>
<div class='raidal4'></div>

8. 同樣，不想這么圓角，也是可以橢圓的，半徑設兩個參數(shù), 就是橢圓。

徑向漸變有很多參數(shù)大家可以自己再嘗試調整，可以出現(xiàn)各種奇怪的形狀，這里就不演示了。相對來說，內凹圓角就夠用了

/* 左上 */
.ellipse {
   height: 100px;
   width: 100px;
   background:radial-gradient(200px 300px at left top,transparent 50%,blue 50%);
}