Home > Article > Web Front-end > 蒙版 倒影 渐变_html/css_WEB-ITnose
蒙版 倒影 渐变_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:35:291221browse
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%) ;
}