蒙版倒影渐变

时间：2015-10-12 14:15:26 阅读：184 评论：0 收藏：0 [点我收藏+]

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

}

蒙版倒影渐变

原文：http://www.cnblogs.com/blingblingstar/p/4871264.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)

蒙版 倒影 渐变

蒙版倒影渐变