本文利用徑向漸層來實現背景透明的內凹圓角。
（影片教學建議：css影片教學）
基本線性漸層
div {
height: 100px;
width: 200px;
background-image: linear-gradient(90deg, red, blue);
}
<div>从左到右的红到蓝渐变</div>加上百分比調整漸層範圍
div {
height: 100px;
width: 200px;
background-image: linear-gradient(90deg, red 20%, blue 80%);
}
<div></div>濃縮漸變範圍，直至重合，形成一個紅藍分隔的兩個色塊
div {
height: 100px;
width: 200px;
background-image: linear-gradient(90deg, red 50%, blue 50%);
}
<div></div>顏色是可以設定透明色的，transparent, 將紅色改成透明色，可以看到只有藍色的色塊了
div {
height: 100px;
width: 200px;
background-image: linear-gradient(90deg, transparent 50%, blue 50%);
}
<div></div>同理聯想到徑向漸變，同樣縮小漸變圈，直至重合，靠近圓心的顏色設為transparent
/* 径向渐变主体 */
.raidal {
height: 100px;
width: 100px;
background:radial-gradient(transparent 50%,blue 50%);
}
<div class='raidal'></div>徑向漸變是可以設置半徑圓心位置的，所以設到左頂角，left top 調整半徑大小為200px，就發現背景透明的內凹圓角實現了。
應用時可以用偽元素設置，然後用絕對定位，子絕父相，調整位置，組合成想要的效果
/* 径向渐变主体 */
.raidal1 {
height: 100px;
width: 100px;
background:radial-gradient(200px at left top,transparent 50%,blue 50%);
}
<div class='raidal1'></div>同理四個方向, 調整圓心位置即可
/* 左上 */
.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>同樣，不想這麼圓角，也是可以橢圓的，半徑設兩個參數, 就是橢圓。
徑向漸層有很多參數大家可以自己再嘗試調整，可以出現各種奇怪的形狀，這裡就不示範了。相對來說，內凹圓角就夠用了
/* 左上 */
.ellipse {
height: 100px;
width: 100px;
background:radial-gradient(200px 300px at left top,transparent 50%,blue 50%);
}
<div class='ellipse'></div>相關推薦：CSS教學
以上是你知道怎麼利用css實現內凹圓角麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！
