CSS3如何實現內凹圓角效果

這篇文章主要介紹了CSS3如何實現內凹圓角效果，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

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

1. 基本線性漸變

div {
 height:100px;
 width:200px;
 background-image:linear-gradient(90deg,red,blue);
}
<div>從左到右的紅到藍漸變</div>

2. 加百分比調整漸變范圍

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

3. 濃縮漸變范圍，直至重合，形成一個紅藍分隔的兩個色塊

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

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

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

<div></div>

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

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

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

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

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

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%);
} 
<div class='raidal1'></div> 
<div class='raidal2'></div>
 <div class='raidal3'></div>
 <div class='raidal4'></div>

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

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

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

感謝你能夠認真閱讀完這篇文章，希望小編分享的“CSS3如何實現內凹圓角效果”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!