蒙版倒影漸變_html/css

background:-webkit-radial-gradient(30% 30%,#fff 0%,#000 100%) ;

2.背景線性漸變：

background:-webkit- linear-gradient(top,#000 0%,#ccc 30%,#ddd 35%,#000 100%);

3.文字漸變：

background:-webkit-linear-gradient(left,#f00,#ff0 25%,#0f0 40%,#0ff 55%,#00f 70%,#f00);

-webkit-background-clip:text;/*只在文本上顯示背景，只有webkit內(nèi)核支持text的剪切模式*/

color:transparent;/*讓文本透明*/

4.蒙版：

理論知識：

-webkit-mask-image:url | gradient /*可以使用圖片或漸變作為遮罩層*/

-webkit-mask-repeat:repeat | repeat-x | repeat-y | no-repeat

-webkit-mask-position:x y;

img{

-webkit-mask-image:url("圖片1.png");

-webkit-mask-repeat:no-repeat;

}

圖片蒙版：

img{

-webkit-mask-image:-webkit-radial-gradient(50% 50%,rgba(0,0,0,0),rgba(0,0,0,1));//

-webkit-mask-position:70%;//

-webkit-mask-repeat:no-repeat;//

}

5.倒影：

? 語法：

?-webkit-box-reflect：none | ? ?

direction：above/below/left/right:

offset：用來設(shè)置生成倒影與對象（原圖）之間的間距，其取值可以是固定的像素值，也可以是百分比值

mask-box-image：用來設(shè)置倒影的遮罩效果，可以是背景圖片，也可以是漸變生成的背景圖像

直接使用倒影蒙版圖片：

div img{

width:200px;

-webkit-box-reflect:right 5px url(2.png);

}

直接使用倒影漸變色：

img{

-webkit-box-reflect:below 5px -webkit-radial-gradient(center center,rgba(255,255,255,0.6) 20%,rgba(255,255,255,0.2) 50%,rgba(255,255,255,0) 60%) ;

}

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com