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

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-Note

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

效果:

css如何实现倒影效果:box-reflect — 你用过吗?-Qui-Note

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

效果:
css如何实现倒影效果:box-reflect — 你用过吗?-Qui-Note

兼容:

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

css如何实现倒影效果:box-reflect — 你用过吗?-Qui-Note