• 说起倒影效果，在传统网页中，我们只能使用photoshop进行事先将倒影设计好，然后导入到网页中，这样不但耗费资源，也阻碍了开发的效率。而
    css3新增了Reflections板块，css  Reflections允许css设计倒影。 
    目前， css  Reflections仅获得webkit引擎的支持，我们只能够在Chrome和Safari浏览器中测试，相信以后会普及的。
    css3的box-reflect属性，可以使我们进行图片、文字等的倒影设计，具体语法：
    语法：
    box-reflect：包括3个值。
    1. direction 定义方向，取值包括 above 、 below 、 left 、 right。

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

    2. offset定义反射偏移的距离，取值包括数值或百分比，其中百分比根据对象的尺寸进行确定。默认为0。
    用长度值来定义倒影与对象之间的间隔。可以为负值。用百分比来定义倒影与对象之间的间隔。可以为负值。
    3. mask-box-image定义遮罩图像，该图像将覆盖投影区域。如果省略该参数值，则默认为无遮罩图像。
    取值：
    none：无遮罩图像：
    使用绝对或相对地址指定遮罩图像。
    使用线性渐变创建遮罩图像。
    使用径向(放射性)渐变创建遮罩图像。
    使用重复的线性渐变创建背遮罩像。
    使用重复的径向(放射性)渐变创建遮罩图像。
    说明：
    设置或检索对象倒影。
    对应的脚本特性为boxReflect。
    当对象源发生变化时，投影能够自动更新，当鼠标经过对象时，也能够在投影中看到鼠标效果，如果该属性应用到video标签上，视频也会以投影效果进行播放。而且投影的规模和反射偏移不影响页面的布局。

    下面的示例定义一个简单的倒影样式，效果图如下：

    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>

效果图：

另外，除了图片我们可以设计倒影外，网页上的任何对象都可以设计css倒影效果，下面的示例是将文本设计为倒影效果：
完整代码如下：

<!DOCTYPE>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>CSS Reflections文字倒影效果</title>

<style type="text/css">

img {

    height: 200px;

    position: absolute;

    right: 0;

    bottom: 0;

}

div {

    border: 1px solid #666;

    color: #666;

    -webkit-box-reflect: below 5px;

}

h1 { text-align: center; }

</style>

</head>

<body>

<div>

    <h1>《雨巷》--- 戴望舒</h1>

    <p>撑着油纸伞，独自<br />

        彷徨在悠长、悠长<br />

        又寂寥的雨巷<br />

        我希望逢着<br />

        一个丁香一样地<br />

        结着愁怨的姑娘 </p>

</div>

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

</body>

</html>

新发现的一个css查找手册
http://www.css88.com/book/css/properties/only-webkit/box-reflect.htm

css3 倒影的更多相关文章

  1. css3倒影

    使用CSS3制作倒影 img { -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from ...

  2. 一张图教会CSS3倒影

    分享 示例图片 在CSS3之前,想要实现示例图片这样的一个倒影效果一般只能通过处理图片的方式,而CSS3问世之后,想要实现这样的效果变得非常简单,只需一个CSS3属性就可以轻松实现了. 这就是今天所要 ...

  3. CSS3主要知识点复习总结+HTML5新增标签

    文件夹: 1.CSS 属性编写顺序 2.CSS3属性(内核前缀) 3.position相对/绝对定位 4.overflow:scroll等的差别 5.display属性应用 6.盒模型计算方法和Bug ...

  4. CSS3 Notes: -webkit-box-reflect实现倒影

    平常我们要实现倒影的效果,一般的做法是使用多个DOM元素绝对定位+scale(负-1)或者rotate.这种方法的缺点是占据空间以及DOM元素过多. 在使用webkit内核的浏览器中(chrome,s ...

  5. 5分钟让你掌握css3阴影、倒影、渐变小技巧！

    一.开始让大家看一张他们组合的图片再一步一步做: 二.先是建立两个文本不做处理运行如图 三.给第一个div字体加上阴影 text-shadow: 5px 5px 10px red; text-shad ...

  6. CSS3图片倒影技术实现及原理

    CSS3图片倒影技术实现及原理 目前为止我们已经探讨了很多CSS3中的新功能和新特征.除了上面这些,实际上还有很多CSS新属性并未包含进CSS3官方标准中,像谷歌浏览器或火狐浏览器等都会利用CSS的浏 ...

  7. CSS3中制作倒影box-reflect

    目前仅在Chrome.Safari和Opera浏览器下支持 box-reflect:none | <direction> <offset>? <mask-box-imag ...

  8. IT兄弟连 HTML5教程 CSS3属性特效 倒影

    在Web制作中,有些时候需要实现一些倒影的效果.在传统网页中,我们只能使用photoshop事先将倒影设计好,然后导入到网页中,这样不但耗费资源,也阻碍了开发效率.而CSS新增了Reflections ...

  9. css3渐变、背景、倒影、变形

    一.背景切割background-clip 语法:background-clip:border-box | padding-box | content-box: border-box      超出b ...

随机推荐

  1. SelectMany等LINQ运算符的使用

    public class Racer : IComparable<Racer>, IFormattable { public string FirstName { get; set; } ...

  2. 调用discuz编辑器再也不是问题了

    前面讲了如何开发一个discuz的特殊主题插件,详情可在此查看discuz特殊主题插件开发步骤和犯的愚蠢错误.上一篇文章讲解的是一些简单的开发步骤,不涉及到具体的编码.网页编辑器之类的都是系统默认带过 ...

  3. Animating graphic objects in Windows Forms.

    原文: Animating graphic objects in Windows Forms. http://bobpowell.net/animation.aspx 文件下载备份:http://fi ...

  4. IOS开发之异步加载网络图片并缓存本地实现瀑布流（二）

    /* * @brief 图片加载通用函数 * @parma imageName 图片名 */ - (void)imageStartLoading:(NSString *)imageName{ NSUR ...

  5. VBA中使用JavaScript脚本语言解析JSON数据

    JSON:JavaScript 对象表示法(JavaScript Object Notation) 和xml相似,都是文本形式(保存在文本文件中或字符串等形式),比如: jsstr = {" ...

  6. css取消input、select默认样式（手机端）

    IOS端: background-color:transparent; border-color:transparent; andorid端: 仅仅使用上面的代码还不够,可以发现select框在某些浏 ...

  7. ITerm2下使用ssh访问Linux

    通常情况下,iTerm2访问远程Linux使用ssh,与Termial基本一样,方法如下: ssh <用户名>@<ip> 然后输入访问的密码即可.当然还有的时候需要指定访问端口 ...

  8. U9单据UI开发--单据类型UI开发

    1.在解决方案下新建UI界面项目,命名以UI作为后缀 2.先删除系统默认新建的UI界面数据模型,并新建界面数据 3.新建单据类型UIModel(界面数据),以model作为界面数据后缀名 4.修改单据 ...

  9. Server asks us to fall back to SIMPLE auth, but this client is configured to only allow secure connections.

    我是在flume向hdfs 写(sink)数据时遇到的这个错误. Server (是指hdfs) asks us to fall back to SIMPLE auth, but this clien ...

  10. IntelliJ IDEA的快捷键

    本人整理了一部分,如果有无效的,欢迎指出.