轉(zhuǎn)自:csdn
圓角玩祟，大家一定都會(huì)做，border-radius, 內(nèi)凹圓角如何實(shí)現(xiàn)欲鹏？
可以拿個(gè)白色圓盒子蓋住方形盒子的大半邊實(shí)現(xiàn)炭玫，但是這樣，是不透明的貌虾，背景發(fā)生改變時(shí)吞加，就要改遮蓋盒子的顏色，或者背景是漸變，改起來(lái)更麻煩衔憨，或背景是圖片等等叶圃，就直接不太好改了，這種方法就有局限性践图。 說(shuō)白了就是遮蓋的那部分不透明以后掺冠，自適應(yīng)性不強(qiáng)。
這里介紹一個(gè)用徑向漸變實(shí)現(xiàn)的內(nèi)凹圓角码党，可以解決上述問(wèn)題德崭。可以用CSS生成一個(gè)背景透明的內(nèi)凹圓角揖盘。
1. 基本線(xiàn)性漸變
div {
height: 100px;
width: 200px;
background-image: linear-gradient(90deg, red, blue);
}
<div>從左到右的紅到藍(lán)漸變</div>1
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)Ψ颍敝林睾希拷鼒A心的顏色設(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ù), 就是橢圓饺著。
徑向漸變有很多參數(shù)大家可以自己再?lài)L試調(diào)整箫攀，可以出現(xiàn)各種奇怪的形狀，這里就不演示了幼衰。相對(duì)來(lái)說(shuō)靴跛，內(nèi)凹圓角就夠用了
/* 左上 */
.ellipse {
height: 100px;
width: 100px;
background:radial-gradient(200px 300px at left top,transparent 50%,blue 50%);
}
