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

来源：互联网发布：mac修图编辑：程序博客网时间：2024/06/04 19:29

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

语法：

参数：

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

给字体也来个倒影：

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

文字渐变+倒影：

-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解决问题;