首页 > 技术笔记 > CSS > CSS3实现文字/图片渐变倒影效果
2013
11-25

CSS3实现文字/图片渐变倒影效果


css3渐变倒影

    文字、图片渐变倒影效果预览可以查看:http://www.wangyanxiang.com

    需要使用的CSS3语法有如下几个:

    box-reflect

    box-reflect:none | <direction> <offset>? <mask-box-image>?

    <decoration>值有四个:above/below/left/right,用来设置倒影的位置。

    <offset>用来设置图片或文字与倒影的间隔;

    <mask-box-image>用来设置渐变方式。none: 无遮罩图像; <url>: 使用绝对或相对地址指定遮罩图像。<linear-gradient>: 使用线性渐变创建遮罩图像。 <radial-gradient>: 使用径向(放射性)渐变创建遮罩图像。<repeating-linear-gradient>: 使用重复的线性渐变创建背遮罩像。 <repeating-radial-gradient>: 使用重复的径向(放射性)渐变创建遮罩图像。

    但是要注意的是:这个效果只支持webkit内核的浏览器,所以如果使用火狐浏览会看不到效果。

    本站主站的文字渐变倒影效果代码如下:

     图片的倒影效果类似,代码如下:




最后编辑:
作者:射雕天龙
转载请注明:转载自射雕天龙的博客(http://blog.wangjunfeng.com)
捐 赠如果您觉得这篇文章有用处,请支持作者!鼓励作者写出更好更多的文章!

CSS3实现文字/图片渐变倒影效果》有 7 条评论

  1. PHP教程网 说:

    还没接触到CSS3

  2. 叶靖 说:

    赞,技术大神啊

  3. 拾叶者 说:

    不错,如果想要效果兼容其他浏览器,用:before或者:after也可以实现的.

留下一个回复

你的email不会被公开。