admin管理员组

文章数量:819692

CSS3实现倒影效果

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

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

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


  • -webkit-box-reflect: above;上倒影
  • -webkit-box-reflect: left;左倒影
  • -webkit-box-reflect: right;右倒影
    2. 给图片加距离:


    3. 渐变(渐变必须是不透明渐变到透明,不能一个颜色渐变成另一个颜色)


    除了图片加倒影,还可以给文字加倒影,同样-webkit-box-reflect有above,below,left ,right四个方向。


本文标签: CSS3实现倒影效果