box-reflect:

  语法:box-reflect:none | <direction> <offset>? <mask-box-image>?因为不是w3c标准,所以在使用的时候要加上浏览器的私有属性

  none:默认值,表示没有倒影;

  direction:倒影生成的方向,分为上下左右,取值分别为above,below,left和right

  offset:表示生成倒影与原图像的距离

  mask-box-image:用来设置倒影的遮罩效果,可以是背景图片,也可以是渐变生成的背景图像;

示例:

显示结果如下:可以发现图片上方只出现了一点倒影,并不是全部,这是因为,在给图片加倒影的时候,一定要给倒影生成的方向加上足够的位置。否则,只是会生成图片,而不会完全呈现出来。这时,给body加上100px的填充:

这时就可以看到图片的倒影了。当然,其他方向也是如此。

下面以right为例说明,可以看到,生成的倒影与图片完全贴合。这时候,给box-reflect加上第二个属性offset

效果如下:可以看到图像之间产生了一段间隙,这就是offset属性

给倒影添加遮罩效果(以向下的倒影举例);

我们可以通过两种方式第一种是渐变生成的背景图像,第二种是外部的背景图像

以渐变为例,没有找到好的背景图片;向下的倒影效果如下:

在原来的基础上添加第三个渐变属性

效果如下:

需要说明的是,在设置渐变的时候,前面一定要有2个参数,否则不生效,另外,径向渐变目前还不支持

倒影(box-reflect)的更多相关文章

  1. css3渐变、背景、倒影、变形

    一.背景切割background-clip 语法:background-clip:border-box | padding-box | content-box: border-box      超出b ...

  2. 在github上写个人简历——最简单却又不容易的内容罗列

    前篇博客分享了一下自己初入github的过程,傻瓜式一步步搭建好主页后,终于该做正事儿了——写简历.在脑袋中构思了很多版本,最后终于决定,先写一个最传统的版本,于是我在箱子中翻出我word版本的简历, ...

  3. 前端面试基础-html篇之CSS3新特性

    CSS3的新特性(个人总结)如下 过度(transiton) 动画(animation) 形状转换 transform:适用于2D或3D转换的元素 transform-origin:转换元素的位置(围 ...

  4. 倒影问题(reflect:below)

    这个例子灵感来源于实现一个登录框下方的倒影: .box { width: 300px; height: 200px; border: 1px solid #1f637b; -webkit-box-re ...

  5. CSS3 Notes: -webkit-box-reflect实现倒影

    平常我们要实现倒影的效果,一般的做法是使用多个DOM元素绝对定位+scale(负-1)或者rotate.这种方法的缺点是占据空间以及DOM元素过多. 在使用webkit内核的浏览器中(chrome,s ...

  6. android 实现倒影

    首先,文章中出现的Gallery 已经不再适用,替代方法请看我的另一篇文章http://blog.csdn.net/xiangzhihong8/article/details/51120460 不过对 ...

  7. CSS3_盒阴影_倒影_盒子大小可调

    1. 盒阴影 会产生一个或者多个阴影 使用:    (多个阴影,以逗号隔开) /* (不能为负值) (可以负值) */ /* 水平方向偏移量 垂直反向偏移量 模糊程度 扩散程度 颜色 是否是内阴影; ...

  8. How to make a combo box with fulltext search autocomplete support?

    I would like a user to be able to type in the second or third word from a TComboBoxitem and for that ...

  9. jquery和CSS3带倒影的3D万花筒旋转动画特效效果演示

    <!DOCTYPE html> <html> <head> <title></title> <meta charset='utf-8' ...

  10. Reflect个人记录

    Reflect是一个内置方法,并不能通过构造函数的来进行构建 Reflect.construct: 与new操作父有一些类似,相当于new target(...) 例: 我们先自己定义一个类 clas ...

随机推荐

  1. Magento 重新安装的方法

    如果之前已经成功安装Magento, 不必再下载Magento进行重新安装,很多朋友删掉所有程序文件然后再上传一个magento程序包进行重新安 装, 这样做很耗时间. 其实只需把magento的根目 ...

  2. Bzoj4556: [Tjoi2016&Heoi2016]字符串 后缀数组

    4556: [Tjoi2016&Heoi2016]字符串 Time Limit: 20 Sec  Memory Limit: 128 MBSubmit: 169  Solved: 87[Sub ...

  3. 50道经典的JAVA编程题 (16-20)

    50道经典的JAVA编程题 (16-20),用了快一个下午来做这10道题了,整理博客的时间貌似大于编程的时间啊..哈哈 [程序16]Nine.java 题目:输出9*9口诀. 1.程序分析:分行与列考 ...

  4. 安装ADT

    ubuntu下安装android开发环境. 打开eclipse,help---install new software,安装adt,一直提示无法连接到dl-ssl.google.com 由https改 ...

  5. Objective-C Autorelease Pool 的实现原理

    内存管理一直是学习 Objective-C 的重点和难点之一,尽管现在已经是 ARC 时代了,但是了解 Objective-C 的内存管理机制仍然是十分必要的.其中,弄清楚 autorelease 的 ...

  6. 【P3O是什么】P3O认证之项目组合、项目群和项目办公室

    如何区分项目组合办公室与项目群和项目办公室? P3O®(Portfolio,Programmed and Project Offices-项目组合.项目群和项目办公室)是由英国商务部 OGC 于200 ...

  7. AQTime教程(1)

    AQTime教程 1 简介 AQTime和MemProof都是AutomatedQA旗下的产品,AQTime比MemProof提供了更丰富强大的功能.该产品含有完整的性能和调试工具集,能够收集程序运行 ...

  8. hbase多用户入库,regionserver下线问题

    近期对hbase多用户插入数据时,regionserver会莫名奇妙的关闭,regionserver的日志有很多异常: 如下: org.apache.hadoop.hbase.DroppedSnaps ...

  9. $_SERVER详细资料整理(转)

    PHP编程中经常需要用到一些服务器的一些资料,特把$_SERVER的详细参数整理下,方便以后使用. $_SERVER['PHP_SELF'] #当前正在执行脚本的文件名,与 document root ...

  10. ZOJ 3827 Information Entropy 水题

    Information Entropy Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://acm.zju.edu.cn/onlinejudge/sh ...