如何用css實現內凹圓角

這篇文章給大家分享的是有關如何用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實現內凹圓角就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！