平常我们要实现倒影的效果，一般的做法是使用多个DOM元素绝对定位+scale(负-1)或者rotate。这种方法的缺点是占据空间以及DOM元素过多。

在使用webkit内核的浏览器中(chrome,safari,移动端浏览器)，可以使用-webkit-box-reflect属性来实现倒影，语法如下所示

  1. [ above | below | right | left ]? <length>? <image>?
  2.  
  3. 该值包涵了三部分：方位+偏移量+遮罩层
  4.  
  5. 方位是必不可少的；在使用遮罩层的时候，偏移量是不可少的，如没有则用零代替
  6.  
  7. ！！！重要：遮罩层的效果与颜色无关，例如使用渐变颜色做遮罩，都是实色则透明，透明则暴漏原始颜色

使用示例如下所示：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <meta charset="utf-8">
  5.   <meta name="viewport" content="width=device-width">
  6.   <title>JS Bin</title>
  7.   <style type="text/csss">
  8.     .box{ width:200px; height:200px; margin-bottom:20px;transform:scale(-1,1); background-image:linear-gradient(90deg,red,yellow);-webkit-box-reflect:below 10px linear-gradient(180deg,transparent,#000); }
  9.   </style>
  10. </head>
  11. <body>
  12.   <div class="box"></div>
  13. </body>
  14. </html>

效果如下：

如果需要在firefox中实现类似效果，可以使用-moz-element()函数来实现，但是在旋转下效果差别较大，如下所示。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <meta charset="utf-8">
  5.   <meta name="viewport" content="width=device-width">
  6.   <title>JS Bin</title>
  7.   <style type="text/css">
  8.     .box{ width:200px; height:200px; margin:100px 0 0 100px; }
  9.     .box1{ background-image:linear-gradient(180deg,red,yellow); transform:scale(1,-1) rotate(45deg)}
  10.     .box2{ background-image:-moz-element(#box1); }
  11.   </style>
  12. </head>
  13. <body>
  14.   <div class="box box1" id="box1"></div>
  15.   <div class="box box2" id="box2"></div>
  16. </body>
  17. </html>

在chrome下使用-webkit-box-reflect的效果是这样的

如果要兼容IE浏览器还可以使用SVG或者canvas来做，SVG主要利用pattern+mask+linearGradient+scale来做，canvas使用scale+globalCompositeOperation。

SVG例子部分代码如下：

  1. <svg width="200" height="200">
  2.     <defs>
  3.       <linearGradient id="a" x1="0" y1="0" x2="0" y2="1">
  4.         <stop offset="0%" style="stop-color:yellow"/>
  5.         <stop offset="100%" style="stop-color:red"/>
  6.       </linearGradient>
  7.       <linearGradient id="b" x1="0" y1="0" x2="0" y2="100%">
  8.         <stop offset="0%" style="stop-color:rgba(255,255,255,0)"/>
  9.         <stop offset="100%" style="stop-color:rgba(255,255,255,1)"/>
  10.       </linearGradient>
  11.       <mask id="c" x="0" y="0" width="1" height="1">
  12.         <rect x="0" y="0" width="100%" height="100%" style="fill:url(#b)" />
  13.       </mask>
  14.     </defs>
  15.     <rect x="0" y="0" width="200" height="200" style="fill:url(#a);" mask="url(#c)">
  16. </svg>

canvas例子部分代码如下

  1. var canvas = document.getElementById('canvas'),
  2.     ctx = canvas.getContext('2d');
  3.  
  4. var linearGradient1 = ctx.createLinearGradient(0,0,0,200);
  5. linearGradient1.addColorStop(0,"red");
  6. linearGradient1.addColorStop(1,"yellow");
  7.  
  8. var linearGradient2 = ctx.createLinearGradient(0,0,0,200);
  9. linearGradient2.addColorStop(0,"transparent");
  10. linearGradient2.addColorStop(1,"#ffffff");
  11.  
  12. ctx.fillStyle = linearGradient1;
  13. ctx.fillRect(0,0,200,200);
  14.  
  15. ctx.globalCompositeOperation = 'destination-out';
  16.  
  17. ctx.fillStyle = linearGradient2;
  18. ctx.fillRect(0,0,200,200);

以上便是倒影实现的各种方法，对比之下用css3的-webkit-box-reflect实现最简单效果也好。

CSS3 Notes: -webkit-box-reflect实现倒影的更多相关文章

  1. css3中webkit内核的滚动栏样式

    项目其中用到的滚动栏样式,在别人的基础上调成适合自己的样式.(IE能够调试滚动栏样式,firefox眼下不能调试) ::-webkit-scrollbar { width: 14px; }/* Tra ...

  2. CSS3 - 盒子的 box - size

    两个参数: border-box和content-box <!DOCTYPE html> <html lang="en"> <head> < ...

  3. CSS3 学习小结

    写样式时有时遇到浏览器兼容问题:-webkit-transition:chrome和safari-moz-transition:firefox-ms-transition:IE-o-transitio ...

  4. CSS3那些不为人知的高级属性

    尽管现代浏览器已经支持了众多的CSS3属性,但是大部分设计师和开发人员貌似依然在关注于一些很“主流”的属性,如border-radius.box-shadow或者transform等.它们有良好的文档 ...

  5. CSS3圆角气泡框，评论对话框

    <title>CSS3圆角气泡框,评论对话框</title> <style> body { ; ; font:1em/1.4 Cambria, Georgia, s ...

  6. 36个让人惊讶的 CSS3 动画效果演示【转】

    本文收集了35个惊人的 CSS3 动画演示,它们将证明 CSS3 Transform 和 Transition 属性的强大能力.CSS 是网页设计非常重要的一部分,随着越来越多的浏览器对 CSS3 支 ...

  7. 转：35个让人惊讶的 CSS3 动画效果演示

    本文收集了35个惊人的 CSS3 动画演示,它们将证明 CSS3 Transform 和 Transition 属性的强大能力.CSS 是网页设计非常重要的一部分,随着越来越多的浏览器对 CSS3 支 ...

  8. CSS3 transition过渡

    transition 属性是一个简写属性,用于设置四个过渡属性: transition: property duration timing-function delay; transition-pro ...

  9. CSS3 高级属性

    尽管现代浏览器已经支持了众多的CSS3属性,但是大部分设计师和开发人员貌似依然在关注于一些很“主流”的属性,如border-radius.box-shadow或者transform等.它们有良好的文档 ...

随机推荐

  1. 札记：Fragment基础

    Fragment概述 在Fragment出现之前,Activity是app中界面的基本组成单位,值得一提的是,作为四大组件之一,它是需要"注册"的.组件的特性使得一个Activit ...

  2. Javascript - Promise学习笔记

    最近工作轻松了点,想起了以前总是看到的一个单词promise,于是耐心下来学习了一下.   一:Promise是什么?为什么会有这个东西? 首先说明,Promise是为了解决javascript异步编 ...

  3. iOS---iOS10适配iOS当前所有系统的远程推送

    一.iOS推送通知简介 众所周知苹果的推送通知从iOS3开始出现, 每一年都会更新一些新的用法. 譬如iOS7出现的Silent remote notifications(远程静默推送), iOS8出 ...

  4. JavaScript Object对象

    目录 1. 介绍:阐述 Object 对象. 2. 构造函数:介绍 Object 对象的构造函数. 3. 实例属性:介绍 Object 对象的实例属性:prototype.constructor等等. ...

  5. Git命令总结

    本文转载自345大神.... 查看原文 先上个图形化界面GIT工具 SourceTree下载链接 windows版 1.8.3 & Mac版 2.2.4 链接: http://pan.baid ...

  6. 以向VS 程序打包集成自动写入注册表功能为例，介绍如何实现自由控制安装过程

    最近由于项目部署时需要更灵活的控制程序安装的流程以及自定义安装行为,特意研究了一下VS程序打包,把解决办法和大家分享一下. 以VS2010为例: 这是一个已经设置好最基本的Visual Studio ...

  7. C#项目中文件的具体含义

    1.Bin 目录 用来存放编译的结果,bin是二进制binary的英文缩写,因为最初C编译的程序文件都是二进制文件,它有Debug和Release两个版本,分别对应的文件夹为bin/Debug和bin ...

  8. 基于Composer Player 模型加载和相关属性设置

    主要是基于达索软件Composer Player.的基础上做些二次开发. public class ComposerToolBarSetting { public bool AntiAliasingO ...

  9. springmvc+mybatis+spring 整合 bootstrap html5

    A 调用摄像头拍照,自定义裁剪编辑头像 [新录针对本系统的视频教程,手把手教开发一个模块,快速掌握本系统]B 集成代码生成器 [正反双向](单表.主表.明细表.树形表,开发利器)+快速构建表单;  技 ...

  10. angularjs 1 开发简单案例(包含common.js,service.js,controller.js,page)

    common.js var app = angular.module('app', ['ngFileUpload']) .factory('SV_Common', function ($http) { ...