CSS3實現(xiàn)內(nèi)凹圓角的實例代碼
我要評論圓角，大家一定都會做，border-radius, 內(nèi)凹圓角如何實現(xiàn)？
可以拿個白色圓盒子蓋住方形盒子的大半邊實現(xiàn)，但是這樣，是不透明的，背景發(fā)生改變時，就要改遮蓋盒子的顏色，或者背景是漸變，改起來更麻煩，或背景是圖片等等，就直接不太好改了，這種方法就有局限性。 說白了就是遮蓋的那部分不透明以后，自適應(yīng)性不強(qiáng)。
這里介紹一個用徑向漸變實現(xiàn)的內(nèi)凹圓角，可以解決上述問題。可以用 CSS 生成一個背景透明的內(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. 濃縮漸變范圍，直至重合，形成一個紅藍(lán)分隔的兩個色塊
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)凹圓角實現(xiàn)了。
應(yīng)用時可以用偽元素設(shè)置，然后用絕對定位，子絕父相，調(diào)整位置，組合成想要的效果
/* 徑向漸變主體 */
.raidal1 {
height:100px;
width:100px;
background:radial-gradient(200px at left top,transparent 50%,blue 50%);
}
<div class='raidal1'></div>
7. 同理四個方向, 調(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è)兩個參數(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)各種奇怪的形狀，這里就不演示了。相對來說，內(nèi)凹圓角就夠用了
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
- 在CSS3里引入的很多新特征中，這篇文章主要介紹了css3圖片邊框border-image的用法,具有一定的參考價值，有興趣的可以了解一下2017-06-30
這篇文章主要介紹了css3 邊框、背景、文本效果的實現(xiàn)代碼,需要的朋友可以參考下2018-03-21利用CSS3偽元素實現(xiàn)逐漸發(fā)光的方格邊框
這篇文章主要給大家介紹了利用CSS3偽元素實現(xiàn)逐漸發(fā)光的方格邊框的相關(guān)資料，文中給出了詳細(xì)的示例代碼供大家參考學(xué)習(xí)，對大家具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來2017-05-07
這篇文章主要介紹了一篇文章帶你學(xué)習(xí)CSS3圖片邊框,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-11-04
