• 说起倒影效果，在传统网页中，我们只能使用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. 安装Ifconfig

    1.ifconfig 2.whereis 检查 3.yum search ifconfig 4.分割线下面让我们安装 net-tools.x86_64 执行 yum -y install net-to ...

  2. AOJ 0121: Seven Puzzle （BFS DP STL 逆向推理）(转载）

    转载自:  http://m.blog.csdn.net/blog/Enjoying_Science/42008801 题目链接:http://acm.hust.edu.cn/vjudge/probl ...

  3. C++开源大全

    程序员要站在巨人的肩膀上,C++拥有丰富的开源库,这里包括:标准库.Web应用框架.人工智能.数据库.图片处理.机器学习.日志.代码分析等. 标准库 C++ Standard Library:是一系列 ...

  4. centos中安装mysql数据库

    1.查看是否已有mysql数据库: #rpm -qa |grep mysql 命令返回空,说明没有安装成功. 2.安装mysql yum install mysql* 安装完成后,却发现只安装了JDB ...

  5. SNMP OID列表 监控需要用到的OID

    zabbix的snmp监控还没开始讲,不过先给大家列一些snmp常用的一些OID,比如cpu.内存.硬盘什么的.先了解这些,在使用snmp监控服务器. 系统参数(1.3.6.1.2.1.1) OID ...

  6. 简单SSM配置详解

    SSM:spring+springMVC+Mybatis 学习网友的http://www.cnblogs.com/invban/p/5133257.html,并对其进行了详细的解说. 源码下载:htt ...

  7. [poj2155]Matrix(二维树状数组)

    Matrix Time Limit: 3000MS   Memory Limit: 65536K Total Submissions: 25004   Accepted: 9261 Descripti ...

  8. 整合Spring Data JPA与Spring MVC: 分页和排序

    之前我们学习了如何使用Jpa访问关系型数据库.比较完整Spring MVC和JPA教程请见Spring Data JPA实战入门,Spring MVC实战入门. 通过Jpa大大简化了我们对数据库的开发 ...

  9. Android之源码之模块编译和调试

    Android之源码之模块编译调试 (一) 进行源码模块修改进行编译的调试 1.首先是从git或者svn上拉一套完整的工程下来,然后全编一下,一般这个时间比较长,大概会得2,3个小时左右, 2,编译成 ...

  10. JavaScript类型判断

    几种方法:typeof,instanceof,Object.prototype.toString,constructor,duck type ES6引入了一种新的原始数据类型Symbol,表示独一无二 ...