语法：
box-reflect：包括3个值。
1. direction 定义方向，取值包括 above 、 below 、 left 、 right。

above：
指定倒影在对象的上边
below：
指定倒影在对象的下边
left：
指定倒影在对象的左边
right：
指定倒影在对象的右边

2. offset定义反射偏移的距离，取值包括数值或百分比，其中百分比根据对象的尺寸进行确定。默认为0。
用长度值来定义倒影与对象之间的间隔。可以为负值。用百分比来定义倒影与对象之间的间隔。可以为负值。
3. mask-box-image定义遮罩图像，该图像将覆盖投影区域。如果省略该参数值，则默认为无遮罩图像。
取值：
none：无遮罩图像：
使用绝对或相对地址指定遮罩图像。
使用线性渐变创建遮罩图像。
使用径向(放射性)渐变创建遮罩图像。
使用重复的线性渐变创建背遮罩像。
使用重复的径向(放射性)渐变创建遮罩图像。
说明：
设置或检索对象倒影。
对应的脚本特性为boxReflect。
  • 下面的示例定义一个简单的倒影样式，效果图如下：

    css代码如下：

<style type="text/css">

img {

    height:250px;

    border:1px solid red;

    -webkit-box-reflect:below;

}

</style>

html代码如下：

<body>

<img src="data:images/bg1.jpg"  />

</body>

我们在上面的基础上继续改进，为倒影设置距离，向下偏移10像素，效果图如下：

改动的css代码：

<style type="text/css">

img {

    height:250px;

    -webkit-box-reflect:below 10px ;

}

</style>

接下来继续进行改进，设计css渐变倒影，通过渐变遮罩逐渐盖住下面的倒影，制作出渐隐效果。
css代码如下：

<style type="text/css">

img {

    height:250px;

    -webkit-box-reflect:below 5px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.5, transparent), to(white));

}

</style>

效果图：

【原文地址：http://blog.csdn.net/kevin_cyj/article/details/51599969】

css3 box-reflect 倒影效果的更多相关文章

  1. 浅谈 css3 box盒子模型以及box-flex的使用

    display:box;box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典的一个布局应用就是布局的垂直等高.水平均分.按比例划分.   一.使 ...

  2. css3 box

    一.box-shadow介绍 box-shadow属性向box添加一个或多个阴影. 语法: box-shadow: offset-x offset-y blur spread color inset; ...

  3. css3 Box model 与 Box-sizing

    1.Box Model(盒模型) CSS中的Box Model分为两种:第一种是W3C的标准模型,另一种是IE的传统模型.它们的相同之处是对元素的width.height.padding.border ...

  4. HTML5/CSS3实现图片倒影效果

    在线演示 本地下载

  5. 【转载】css3 content 生成内容

    content一般和:before,:after一起使用,用来生成内容(img和input没有该属性),content的内容一般可以为以下四种: none: 不生成任何值. attr: 插入标签属性值 ...

  6. 12款有助于简化CSS3开发的工具

    网站开发者能通过CSS3为网站设计增添很多时尚元素,CSS3 对CSS规范做了很大的改进.现在,本文将介绍12款有助于简化CSS3开发的工具.  1.CSS3 Pie: 允许在IE上使用CSS3绝大部 ...

  7. CSS3 用户界面

    CSS3用户界面 在CSS3中,新的用户界面特性包括重设元素尺寸,盒尺寸以及轮廓等. 用户界面属性: resize box-sizing outline-offset 浏览器支持 属性 浏览器支持 r ...

  8. css3前端工具

    随着CSS3的出现,CSS3讨论的话题越来越多了,现在各种教程也是多如牛毛,不比一年前的时候,找个资料要捞遍整个互联网,而且还很难找到自己需要的参考资料.从侧面也说明,CSS3对于前端工程师来说,越来 ...

  9. css3常用方法以及css3选择器

    最重要的 CSS3 模块包括: 选择器 框模型 背景和边框 文本效果 2D/3D 转换 动画 多列布局 用户界面   CSS3 边框   CSS3 边框 通过 CSS3,您能够创建圆角边框,向矩形添加 ...

  10. CSS3总结学习（一）：CSS3用户界面

    在CSS3中,新的用户界面属性有很多,本文重点介绍resize,box-sizing,offset. 浏览器支持,如下图,图片源于W3school 1.CSS Resizing 在css3,resiz ...

随机推荐

  1. KMP算法详解-- 转自Matrix67

       6 7 8 9 --    A = a b a b  6 7  7 8 9 --    A = a b a b a  5 6 7  8 9 --    A = a b a b a b  6 7 ...

  2. linux时间校准设置，解决与本地时间不一致问题

    时间安装脚本   从NTP上把时间同步到本地 cp /usr/share/zoneinfo/Asia/Shanghai /etc/localtime 更新本地时间 ntpdate us.pool.nt ...

  3. Python网络爬虫

    http://blog.csdn.net/pi9nc/article/details/9734437 一.网络爬虫的定义 网络爬虫,即Web Spider,是一个很形象的名字. 把互联网比喻成一个蜘蛛 ...

  4. 使用Vim进行开发

    从士兵到程序员再到SOHO程序员 (二)   原文地址: http://blog.huhao.name/blog/2013/12/13/become-a-freelancer-2/ 作者:胡皓 Blo ...

  5. json序列化NHibernate的实体

    在使用nhibernate时,想将实体对象序列化成json字符串,然后打印在日志中. 序列化时会出现问题,应该是因为这个实体被hibernate管理的原因.具体原因没有分析. 解决方案:为实体创建一个 ...

  6. [转]Inspecting Obj-C parameters in gdb

    Since the addition of i386 and x86_64 to the Mac OS’s repertoire several years back, remembering whi ...

  7. C语言可变参数函数的编写

    1. 引言 C语言我们接触的第一个库函数是 printf(“hello,world!”);其参数个数为1个. 然后,我们会接触到诸如: printf(“a=%d,b=%s,c=%c”,a,b,c);此 ...

  8. Asp.Net请求响应过程

    Asp.Net请求响应过程 在之前,我们写了自己的Asp.Net框架,对整个流程有了一个大概的认识.这次我们来看一下Asp.Net整个请求处理过程是怎么样的. 浏览器封装请求报文,发送请求到达服务器, ...

  9. 如何去除AJAX收到数据中包含的html页面数据

    问题: 如下代码所示,我用AJAX收到来自url: 'kzkj_check.jsp',返回的数据msg,总是包含页面的html数据,可是我只想要我返回的数据“false”, $.ajax({ url: ...

  10. Android 下载模块分析(DownloadManager和DownloadProvider)

    Android下载模块主要有2个部分组成:DownloadManager和DownloadProvider:其中DownloadManager提供接口供调用,具体的实现是 DownloadProvid ...