常规实现倒影的方法自然是图片,现在我们用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解决问题;