CSS3.0新属性之box-reflect(倒影)

常规实现倒影的方法自然是图片,现在我们用CSS3来实现这一效果。

语法:

-webkit-box-reflect:   ;

参数:

direction:倒影方向[above|below|left|right](上下左右)

offset: 从边缘到倒影开始的距离(可以是长度值或百分比,默认值为0)

以下示例需在Chorme/Safari才能观看

mask-box-image:倒影效果(可以加上透明,遮照等)

原图:

左右倒影:

-webkit-box-reflect: left 1px -webkit-gradient(linear, 0% 100%,100% 100%, from(rgba(255,255,255,0)), to(white));

-webkit-box-reflect: right 1px -webkit-gradient(linear, 0% 100%,100% 100%, from(rgba(255,255,255,0)), to(white));

上下倒影:

-webkit-box-reflect: above 1px -webkit-gradient(linear, 0% 100%,100% 100%, from(rgba(255,255,255,0)), to(white));

-webkit-box-reflect: below 1px -webkit-gradient(linear, 0% 100%,100% 100%, from(rgba(255,255,255,0)), to(white));

给字体也来个倒影:

CSS3.0新属性之box-reflect(倒影)

-webkit-box-reflect: below 1px -webkit-gradient(linear, 0 0, 0 100%, from(transparent), color-stop(.5, transparent), to(rgba(3,3,3,.2)));

文字渐变+倒影:

CSS3.0新属性之box-reflect(倒影)

-webkit-box-reflect: below 1px -webkit-gradient(linear, 0 0, 0 100%, from(transparent), color-stop(.5, transparent), to(rgba(3,3,3,.2)));background: -webkit-linear-gradient(top, rgba(174,188,191,1) 0%,rgba(110,119,116,1) 50%,rgba(10,14,10,1) 51%,rgba(10,8,9,1) 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;

PS:a标签默认不起作用,加个display:inline-block解决问题;

发表评论

电子邮件地址不会被公开。 必填项已用*标注