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

倒影的属性:
box-reflect:
给图片加倒影,只需要给div加一张图片:
CSS3实现倒影效果

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

CSS3实现倒影效果
CSS3实现倒影效果

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

相关文章:

  • 2022-12-23
  • 2022-12-23
  • 2021-06-12
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
猜你喜欢
  • 2021-08-07
  • 2022-12-23
  • 2021-10-19
  • 2021-08-07
  • 2022-02-28
  • 2022-12-23
相关资源
相似解决方案