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四个方向。
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
发布了21 篇原创文章 · 获赞 16 · 访问量 534
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 游动-白 设计师: 上身试试

分享到微信朋友圈

×

扫一扫,手机浏览