CSS3如何實(shí)現(xiàn)內(nèi)凹圓角效果

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

成都創(chuàng)新互聯(lián)，為您提供網(wǎng)站建設(shè)、網(wǎng)站制作、網(wǎng)站營(yíng)銷推廣、網(wǎng)站開發(fā)設(shè)計(jì)，對(duì)服務(wù)成都建筑動(dòng)畫等多個(gè)行業(yè)擁有豐富的網(wǎng)站建設(shè)及推廣經(jīng)驗(yàn)。成都創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司成立于2013年,提供專業(yè)網(wǎng)站制作報(bào)價(jià)服務(wù),我們深知市場(chǎng)的競(jìng)爭(zhēng)激烈，認(rèn)真對(duì)待每位客戶，為客戶提供賞心悅目的作品。 與客戶共同發(fā)展進(jìn)步，是我們永遠(yuǎn)的責(zé)任！

這里介紹一個(gè)用徑向漸變實(shí)現(xiàn)的內(nèi)凹圓角，可以解決上述問題?？梢杂?CSS 生成一個(gè)背景透明的內(nèi)凹圓角。

1. 基本線性漸變

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

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

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

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

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

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

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

<div></div>

5. 同理聯(lián)想到徑向漸變，同樣縮小漸變?nèi)Γ敝林睾?，靠近圓心的顏色設(shè)成transparent。

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

6. 徑向漸變是可以設(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>

7. 同理四個(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>

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

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

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

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“CSS3如何實(shí)現(xiàn)內(nèi)凹圓角效果”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來學(xué)習(xí)!

當(dāng)前文章：CSS3如何實(shí)現(xiàn)內(nèi)凹圓角效果
文章源于：http://muchs.cn/article18/jehcgp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供服務(wù)器托管、網(wǎng)站設(shè)計(jì)公司、企業(yè)建站、App開發(fā)、品牌網(wǎng)站設(shè)計(jì)、外貿(mào)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)