CSS3实现倒影效果

css的功能很强大,可以实现很多效果。比如图像的倒影和文字的倒影等,利用的是box-reflect,因为浏览器兼容问题,目前主要采用-webkit-box-reflect来实现(谷歌浏览器)。

倒影的属性:
box-reflect:
给图片加倒影,只需要给div加一张图片:
在这里插入图片描述

  • -webkit-box-reflect: below;下倒影

在这里插入图片描述
CSS3实现倒影效果_第1张图片

  • -webkit-box-reflect: above;上倒影
  • -webkit-box-reflect: left;左倒影
  • -webkit-box-reflect: right;右倒影
    2. 给图片加距离:
    在这里插入图片描述
    CSS3实现倒影效果_第2张图片
    3. 渐变(渐变必须是不透明渐变到透明,不能一个颜色渐变成另一个颜色)
    在这里插入图片描述
    CSS3实现倒影效果_第3张图片
    除了图片加倒影,还可以给文字加倒影,同样-webkit-box-reflect有above,below,left ,right四个方向。
    在这里插入图片描述
    在这里插入图片描述
    CSS3实现倒影效果_第4张图片

你可能感兴趣的:(CSS3实现倒影效果)