css可以实现倒影效果，虽然前几年做智慧屏，大屏的时候经常用，但没能总结，今天又想到了了这个属性，做个笔记吧！年纪大了，记忆力不好使了。
css如何实现倒影效果：box-reflect — 你用过吗？-QUI-Notes

box-reflect 是css3倒影属性

公式：

box-reflect：none | <direction> <offset> <mask-box-image>
  • direction 倒影方向，可用值: above(上) | below(下) | left | right
  • offset 位置偏移量，可用值： 长度10px或百分比10%
  • mask-box-image 倒影效果，可用值  none | url | linear-gradient | radial-gradient | repeating-linear-gradient | repeating-radial-gradient

案例：

.box img{
-webkit-box-reflect: below;
}

效果：

css如何实现倒影效果：box-reflect — 你用过吗？-QUI-Notes 

.box img{
-webkit-box-reflect: below 10px;
}

效果：

css如何实现倒影效果：box-reflect — 你用过吗？-QUI-Notes 

.box img{
-webkit-box-reflect: below 10px -webkit-linear-gradient(transparent,transparent 50%,rgba(255,255,255,0.6));
}

效果：
css如何实现倒影效果：box-reflect — 你用过吗？-QUI-Notes

兼容：

使用的时候最好加 -webkit- 兼容谷歌等浏览器，该属性火狐/IE不支持！需要的话transform翻转一下图片，不过透明渐变效果不好实现！或者可以用图片替换。

css如何实现倒影效果：box-reflect — 你用过吗？-QUI-Notes