首頁  >  文章  >  web前端  >  你知道怎麼利用css實現內凹圓角麼

你知道怎麼利用css實現內凹圓角麼

王林
王林轉載
2020-11-04 16:37:032328瀏覽

你知道怎麼利用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=&#39;raidal&#39;></div>

徑向漸變是可以設置半徑圓心位置的,所以設到左頂角,left top 調整半徑大小為200px,就發現背景透明的內凹圓角實現了。

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

/* 径向渐变主体 */
.raidal1 {
    height: 100px;
    width: 100px;
    background:radial-gradient(200px at left top,transparent 50%,blue 50%);
}

<div class=&#39;raidal1&#39;></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=&#39;raidal1&#39;></div>
<div class=&#39;raidal2&#39;></div>
<div class=&#39;raidal3&#39;></div>
<div class=&#39;raidal4&#39;></div>

同樣,不想這麼圓角,也是可以橢圓的,半徑設兩個參數, 就是橢圓。

徑向漸層有很多參數大家可以自己再嘗試調整,可以出現各種奇怪的形狀,這裡就不示範了。相對來說,內凹圓角就夠用了

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

<div class=&#39;ellipse&#39;></div>

相關推薦:CSS教學

以上是你知道怎麼利用css實現內凹圓角麼的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文轉載於:csdn.net。如有侵權,請聯絡admin@php.cn刪除