蒙版 倒影 渐变_html/css_WEB-ITnose

1.背景径向渐变：

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内核支持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：用来设置生成倒影与对象（原图）之间的间距，其取值可以是固定的像素值，也可以是百分比值

mask-box-image：用来设置倒影的遮罩效果，可以是背景图片，也可以是渐变生成的背景图像

直接使用倒影蒙版图片：

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%) ;

}