CSS3图片倒影技术实现过程

很多CSS新属性并未包含进CSS3官方标准中,像谷歌浏览器或火狐浏览器等都会利用CSS的浏览器引擎前缀(Vendor Prefix)来实现很多自定义的CSS功能。-webkit-box-reflect 属性就是以谷歌浏览器为代表的Webkit渲染引擎独有的特征。-webkit-box-reflect 的作用是让图片出现倒影。

实现倒影的基本语法

假设我们想给图片增加倒影效果,可以这样写:img { -webkit-box-reflect: below; }

倒影效果

倒影偏移量

Offset属性值用来定义图片和倒影影像之间的间距。参考代码:img { -webkit-box-reflect: below 10px; }

倒影偏移量

给倒影增加消隐效果

在现实生活中,倒影的出现通常是上半部比较清晰,下面半部逐渐消隐。为了在CSS中实现这种效果,我们需要运用CSS3渐变色(Gradients)功能,参考代码:-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(250, 250, 250, 0.1)));

给倒影增加消隐效果

  • 发表于:
  • 原文链接:http://kuaibao.qq.com/s/20171228A0HDJY00?refer=cp_1026

相关快讯

扫码关注云+社区