你的位置:首页 > 网页设计

[网页设计]蒙版 倒影 渐变


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> <offset>? <mask-box-image>?
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%) ;
}

蒙版 倒影 渐变 - 星梦缘---萌 - 星梦缘-萌