平常我们要实现倒影的效果，一般的做法是使用多个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. python3  threading初体验

    python3中thread模块已被废弃,不能在使用thread模块,为了兼容性,python3将thread命名为_thread.python3中我们可以使用threading进行代替. threa ...

  2. 哪种缓存效果高？开源一个简单的缓存组件j2cache

    背景 现在的web系统已经越来越多的应用缓存技术,而且缓存技术确实是能实足的增强系统性能的.我在项目中也开始接触一些缓存的需求. 开始简单的就用jvm(java托管内存)来做缓存,这样对于单个应用服务 ...

  3. SQLServer事务同步下如何收缩日志

    事务同步是SQLServer做读写分离的一种常用的方式. 随着业务数据的不断增长,数据库积攒了大量的日志,为了腾出硬盘空间,需要对数据库日志进行清理 订阅数据库的日志清理 因为订阅数据库所有的数据都来 ...

  4. 使用webstorm+webpack构建简单入门级“HelloWorld”的应用&&引用jquery来实现alert

    使用webstorm+webpack构建简单入门级"HelloWorld"的应用&&构建使用jquery来实现 1.首先你自己把webstorm安装完成. 请参考这 ...

  5. 我为NET狂官方面试题-数据库篇

    求结果:select "1"? 查找包含"objs"的表?查找包含"o"的数据库? 求今天距离2002年有多少年,多少天? 请用一句SQL获 ...

  6. ASP.NET MVC5+EF6+EasyUI 后台管理系统（67）-MVC与ECharts

    系列目录 ECharts 特性介绍 ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Fire ...

  7. 【原创分享·微信支付】C# MVC 微信支付之微信模板消息推送

    微信支付之微信模板消息推送                    今天我要跟大家分享的是“模板消息”的推送,这玩意呢,你说用途嘛,那还是真真的牛逼呐.原因在哪?就是因为它是依赖微信生存的呀,所以他能不 ...

  8. C#中如何创建PDF网格并插入图片

    这篇文章我将向大家演示如何以编程的方式在PDF文档中创建一个网格,并将图片插入特定的网格中. 网上有一些类似的解决方法,在这里我选择了一个免费版的PDF组件.安装控件后,创建新项目,添加安装目录下的d ...

  9. SDWebImage源码解读 之 NSData+ImageContentType

    第一篇 前言 从今天开始,我将开启一段源码解读的旅途了.在这里先暂时不透露具体解读的源码到底是哪些?因为也可能随着解读的进行会更改计划.但能够肯定的是,这一系列之中肯定会有Swift版本的代码. 说说 ...

  10. Velocity初探小结--Velocity在spring中的配置和使用

    最近正在做的项目前端使用了Velocity进行View层的数据渲染,之前没有接触过,草草过了一遍,就上手开始写,现在又回头细致的看了一遍,做个笔记. velocity是一种基于java的模板引擎技术, ...