圓角，大家一定都會做，border-radius, 內凹圓角如何實現？
可以拿個白色圓盒子蓋住方形盒子的大半邊實現，但是這樣，是不透明的，背景發生改變時，就要改遮蓋盒子的顏色，或者背景是漸變，改起來更麻煩，或背景是圖片等等，就直接不太好改了，這種方法就有局限性。 說白了就是遮蓋的那部分不透明以后，自適應性不強。
這里介紹一個用徑向漸變實現的內凹圓角，可以解決上述問題。可以用 CSS 生成一個背景透明的內凹圓角。
1. 基本線性漸變
| div { height:100px; width:200px; background-image:linear-gradient(90deg,red,blue);}<div>從左到右的紅到藍漸變</div> |
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. 同理聯想到徑向漸變，同樣縮小漸變圈，直至重合，靠近圓心的顏色設成transparent。
| /* 徑向漸變主體 */ .raidal { height:100px; width:100px; background:radial-gradient(transparent 50%,blue 50%);} <div class='raidal'></div> |
6. 徑向漸變是可以設置半徑圓心位置的，所以設到左頂角，left top 調整半徑大小為 200px，就發現背景透明的內凹圓角實現了。
應用時可以用偽元素設置，然后用絕對定位，子絕父相，調整位置，組合成想要的效果
| /* 徑向漸變主體 */ .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> |
