如何用css實(shí)現(xiàn)內(nèi)凹圓角

這篇文章給大家分享的是有關(guān)如何用css實(shí)現(xiàn)內(nèi)凹圓角的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧。

利用徑向漸變來(lái)實(shí)現(xiàn)背景透明的內(nèi)凹圓角。

基本線性漸變

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

<div>從左到右的紅到藍(lán)漸變</div>

加百分比調(diào)整漸變范圍

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

<div></div>

濃縮漸變范圍，直至重合，形成一個(gè)紅藍(lán)分隔的兩個(gè)色塊

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

<div></div>

顏色是可以設(shè)置透明色的，transparent, 將紅色改成透明色，可以看到只有藍(lán)色的色塊了

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

<div></div>

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

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

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

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

應(yīng)用時(shí)可以用偽元素設(shè)置，然后用絕對(duì)定位，子絕父相，調(diào)整位置，組合成想要的效果

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

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

同理四個(gè)方向, 調(diào)整圓心位置即可

/* 左上 */
.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>

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

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

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

<div class='ellipse'></div>

感謝各位的閱讀！關(guān)于如何用css實(shí)現(xiàn)內(nèi)凹圓角就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！