本文利用徑向漸層來實現背景透明的內凹圓角。
(影片教學建議: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中文網其他相關文章!