使用CSS3制作倒影 box-reflect

此属性并不是W3C标准属性，在具体使用之时，还是需要添加浏览器的私有属性，根据浏览器的兼容性，使用box-reflect时需要添加-webkit和前缀：

-webkit-box-reflect：none | <direction> <offset>? <mask-box-image>?
box-reflect：none | <direction> <offset>? <mask-box-image>?

box-reflect取值说明

    从box-reflect语法中可以得知，其主要包括以下几个属性值：

•     none    :此值为    box-reflect    默认值，表示无倒影效果；
•     <direction>    :此值表示    box-reflect    生成倒影的方向，主要包括以下几个值：
  •     above    :表示生成的倒影在对象（原图）的上方；
  •     below    :表示生成的倒影在对象（原图）的下方；
  •     left    :表示生成的倒影在对象(原图)的左侧；
  •     right    :表示生成的倒影在对象(原图)的右侧；
•     <offset>    :用来设置生成倒影与对象（原图）之间的间距，其取值可以是固定的像素值，也可以是百分比值

我们回到教程中来，首先按照前面介绍的方法，给对像生成一个向下的倒影，并且给box-reflect加上<mask-box-image>属性值（记住是渐变生成的）：

.box-reflect img {
  -webkit-box-reflect: below 0 -webkit-linear-gradient(top,rgba(250,250,250,0),rgba(250,250,250,.0) 30%,rgba(250,250,250,0.3));
  box-reflect: below 0 -webkit-linear-gradient(top,rgba(250,250,250,0),rgba(250,250,250,.0) 30%,rgba(250,250,250,0.3));
}

效果如下：

著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。
原文:  https://www.w3cplus.com/css3/css3-box-reflect.html  ©  w3cplus.com