分享一篇利用CSS3實現內凹圓角的效果代碼

本篇主要介紹了CSS3實作內凹圓角的實例程式碼，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟著小編過來看看吧

圓角，大家一定都會做，border-radius, 內凹圓角如何實現？

可以拿個白色圓盒子蓋住方形盒子的大半邊實現，但是這樣，是不透明的，背景發生改變時，就要改遮蓋盒子的顏色，或者背景是漸變，改起來更麻煩，或背景是圖片等等，就直接不太好改了，這種方法就有限制。 說穿了就是遮蓋的部分不透明以後，自適應不強。

這裡介紹一個用徑向漸層實現的內凹圓角，可以解決上述問題。可以用 CSS 產生一個背景透明的內凹圓角。

1. 基本線性漸變

p {
 height:100px;
 width:200px;
 background-image:linear-gradient(90deg,red,blue);
}
<p>从左到右的红到蓝渐变</p>

2. 加百分比調整漸層範圍

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

3. 濃縮漸層範圍，直到重合，形成兩個紅藍分隔的色塊

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

4. 顏色是可以設定透明色的，transparent, 將紅色改成透明色，可以看到只有藍色的色塊了。

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

<p></p>

5. 同理聯想到徑向漸變，同樣縮小漸變圈，直至重合，靠近圓心的顏色設成transparent。

 /* 径向渐变主体 */ 
.raidal {
 height:100px;
 width:100px;
 background:radial-gradient(transparent 50%,blue 50%);
}
 <p class=&#39;raidal&#39;></p>

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

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

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

7.同理四個方向, 調整圓心位置即可

 /* 左上 */ 
.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%);
} 
<p class=&#39;raidal1&#39;></p> 
<p class=&#39;raidal2&#39;></p>
 <p class=&#39;raidal3&#39;></p>
 <p class=&#39;raidal4&#39;></p>

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

 /* 左上 */ 
.ellipse {
 height:100px;
 width:100px;
 background:radial-gradient(200px 300px at left top,transparent 50%,blue 50%);
}
 <p class=&#39;ellipse&#39;></p>

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

【相關推薦】

1. 免費css線上影片教學

2. css線上手冊

3. php.cn獨孤九賤（2）－css影片教學

以上是分享一篇利用CSS3實現內凹圓角的效果代碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！