我們上期說(shuō)的是線性漸變 linear-gradient
我們?cè)賮?lái)說(shuō)說(shuō)徑向漸變 radial-gradient(shape size at position, color ...)
- 淺淺試用一下
shape 圓 / 橢圓
size 漸變的半徑
position 圓心的位置
當(dāng)然 color后面也可以加位置信息 px和%都接受 如果位置信息沖突的話 同樣 漸變也會(huì)消失
height: 200px;
width: 200px;
background-image: radial-gradient(circle, red, green, yellow);
徑向漸變
- 改變圓心的位置
height: 200px;
width: 200px;
background-image: radial-gradient(circle at , red 20px, green 20%);
改變圓心
- 當(dāng)紅色變?yōu)橥该?/li>
height: 200px;
width: 200px;
background-image: radial-gradient(circle at , transparent 20px, green 0);
缺一個(gè)角
- 改變下background-size試試
height: 200px;
width: 200px;
background-image: radial-gradient(circle at , transparent 20px, green 0);
background-size: 50% 50%;
縮小size
- 當(dāng)我們?cè)O(shè)置不允許重復(fù)時(shí)常侦，就只剩左上角了
- 然后對(duì)左上角的處理一下 再疊加使用
height: 200px;
width: 200px;
background-image: radial-gradient(circle at bottom left, transparent 20px, green 0),
radial-gradient(circle at bottom right, transparent 20px, red 0)
radial-gradient(circle at top left, transparent 20px, blue 0)
radial-gradient(circle at top right, transparent 20px, orange 0);
background-size: 50% 50%;
小伙伴們可以自己試試這個(gè)效果
總結(jié)： 當(dāng)我看到這個(gè)需求的時(shí)候蔫仙，第一個(gè)想法是圖片扩然，可是這個(gè)內(nèi)容不確定纵隔，web的圖片不能自定義拉伸，肯定會(huì)有所變形，結(jié)果看到了這個(gè)神奇的css。只能說(shuō) css yyds。
