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

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

[ above | below | right | left ]? <length>? <image>?

该值包涵了三部分：方位+偏移量+遮罩层

方位是必不可少的；在使用遮罩层的时候，偏移量是不可少的，如没有则用零代替

！！！重要：遮罩层的效果与颜色无关，例如使用渐变颜色做遮罩，都是实色则透明，透明则暴漏原始颜色

使用示例如下所示：

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width">

  <title>JS Bin</title>

  <style type="text/csss">

    .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); }

  </style>

</head>

<body>

  <div class="box"></div>

</body>

</html>

效果如下：

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

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width">

  <title>JS Bin</title>

  <style type="text/css">

    .box{ width:200px; height:200px; margin:100px 0 0 100px; }

    .box1{ background-image:linear-gradient(180deg,red,yellow); transform:scale(1,-1) rotate(45deg)}

    .box2{ background-image:-moz-element(#box1); }

  </style>

</head>

<body>

  <div class="box box1" id="box1"></div>

  <div class="box box2" id="box2"></div>

</body>

</html>

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

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

SVG例子部分代码如下：

<svg width="200" height="200">

    <defs>

      <linearGradient id="a" x1="0" y1="0" x2="0" y2="1">

        <stop offset="0%" style="stop-color:yellow"/>

        <stop offset="100%" style="stop-color:red"/>

      </linearGradient>

      <linearGradient id="b" x1="0" y1="0" x2="0" y2="100%">

        <stop offset="0%" style="stop-color:rgba(255,255,255,0)"/>

        <stop offset="100%" style="stop-color:rgba(255,255,255,1)"/>

      </linearGradient>

      <mask id="c" x="0" y="0" width="1" height="1">

        <rect x="0" y="0" width="100%" height="100%" style="fill:url(#b)" />

      </mask>

    </defs>

    <rect x="0" y="0" width="200" height="200" style="fill:url(#a);" mask="url(#c)">

</svg>

canvas例子部分代码如下

var canvas = document.getElementById('canvas'),

    ctx = canvas.getContext('2d');

var linearGradient1 = ctx.createLinearGradient(0,0,0,200);

linearGradient1.addColorStop(0,"red");

linearGradient1.addColorStop(1,"yellow");

var linearGradient2 = ctx.createLinearGradient(0,0,0,200);

linearGradient2.addColorStop(0,"transparent");

linearGradient2.addColorStop(1,"#ffffff");

ctx.fillStyle = linearGradient1;

ctx.fillRect(0,0,200,200);

ctx.globalCompositeOperation = 'destination-out';

ctx.fillStyle = linearGradient2;

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. Visual Studio Code 代理设置

    Visual Studio Code (简称 VS Code)是由微软研发的一款免费.开源的跨平台文本(代码)编辑器,在十多年的编程经历中,我使用过非常多的的代码编辑器(包括 IDE),例如 Fron ...

  2. Azure Service Fabric 开发环境搭建

    微服务体系结构是一种将服务器应用程序构建为一组小型服务的方法,每个服务都按自己的进程运行,并通过 HTTP 和 WebSocket 等协议相互通信.每个微服务都在特定的界定上下文(每服务)中实现特定的 ...

  3. 【原】AFNetworking源码阅读（一）

    [原]AFNetworking源码阅读(一) 本文转载请注明出处 —— polobymulberry-博客园 1. 前言 AFNetworking版本:3.0.4 由于我平常并没有经常使用AFNetw ...

  4. git亲测命令

    一.Git新建本地分支与远程分支关联问题 git checkout -b branch_name origin/branch_name 或者 git branch --set-upstream bra ...

  5. UE4新手引导之下载和安装虚幻4游戏引擎

    1) 进入虚幻4的官方主页(https://www.unrealengine.com/) 这里你可以获得关于虚幻4的最新资讯,包括版本更新.博客更新.新闻和商城等.自2015年起,该引擎已经提供免费下 ...

  6. 深入浅出JavaScript之闭包（Closure）

    闭包(closure)是掌握Javascript从人门到深入一个非常重要的门槛,它是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现.下面写下我的学习笔记~ 闭包-无处不 ...

  7. slf4j中的MDC

    slf4j中MDC是什么鬼 slf4j除了trace.debug.info.warn.error这几个日志接口外,还可以配合MDC将数据写入日志.换句话说MDC也是用来记录日志的,但它的使用方式与使用 ...

  8. MementoPattern(备忘录模式)

    /** * 备忘录模式 * @author TMAC-J * 用于存储bean的状态 */ public class MementoPattern { public class Memento{ pr ...

  9. Ubuntu1604下安装Liggghts及CFDEM Coupling

    部分内容参考http://www.linuxdiyf.com/linux/16315.html LIGGGHTS是一款开源的DEM软件,来自于著名的分子动力学软件LAMMPS,目前借助于CFDEM C ...

  10. transient关键字的用法

    本篇博客转自 一直在路上 Java transient关键字使用小记 1. transient的作用及使用方法 我们都知道一个对象只要实现了Serilizable接口,这个对象就可以被序列化,Java ...