• 说起倒影效果，在传统网页中，我们只能使用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. less文件转换为css文件

    Less 是一门 CSS 预处理语言,它扩充了 CSS 语言,增加了诸如变量.混合(mixin).函数等功能,让 CSS 更易维护.方便制作主题.扩充. 本文主要介绍less文件如何转化为css文件. ...

  2. Tomcat内存设置

    MyEclipse Tomcat的JDK菜单:“Optional Java VM arguments:”框中输入“有前置空格”   -Xms512m -Xmx512m -XX:PermSize=512 ...

  3. Mysql新知识点150928

    1.select distinct(DATE_FORMAT(updatetime,'%Y-%m')) as updatetime from barcode where pid!=0 order by ...

  4. Linux -- 文件统计常用命令

    标签(空格分隔): Linux sort -- 文件内排序命令 sort将文件的每一行作为一个单位,相互比较,比较原则是从首字符向后,依次比较其ASCII码. 按每行升序排序: sort seq.tx ...

  5. 12.NFS搭建配置

    参考博客:http://www.cnblogs.com/mchina/archive/2013/01/03/2840040.html 1.关闭防火墙和SELINUX $ service iptable ...

  6. WIN10图标显示异常

    1.打开控制面板,右上边查看方式选择边小图标显示 2.打开显示里面的自定义缩放级别 3.设置级别为125%  然后点击 应用 4.注销或者重启,然后将异常的快捷方式点击打开,就会恢复正常,至少我的是回 ...

  7. JS中的各种类型转换规则(转)

    JS中的类型转换非常恶心,大家都懂的,不过该学还是要学. 今天看犀牛书看到了转换规则,总结出来. X转字符串.数字.布尔值 X表示各种类型的值,直接上图: 值 转数字 转字符串 转布尔值 undefi ...

  8. SQL Server显式事务与隐式事务

    事务是单个的工作单元.如果某一事务成功,则在该事务中进行的所有数据修改均会提交,成为数据库中的永久组成部分.如果事务遇到错误且必须取消或回滚,则所有数据库修改均被清除. SQL Server中有一下几 ...

  9. div水平居中与垂直居中的方法【摘自美浩工作室官方博客 】

    大家往往在写页面中会遇到不固定宽和高的div如果水平和垂直都居中呢?在写css的时候经常遇到的一个问题,当div没有固定的宽度或者高度的时候,如何才能让div水平或者垂直居中显示.如果div有固定宽度 ...

  10. src与href

    href是指向网络资源所在位置,建立和当前元素(锚点)或当前文档(链接)之间的链接,用于超链接. src是指向外部资源的位置,指向的内容将会嵌入到文档中当前标签所在位置:在请求src资源时会将其指向的 ...