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. North America Qualifier (2015)

    https://icpc.baylor.edu/regionals/finder/north-america-qualifier-2015 一个人打.... B 概率问题公式见代码 #include ...

  2. 机器学习总结之逻辑回归Logistic Regression

    机器学习总结之逻辑回归Logistic Regression 逻辑回归logistic regression,虽然名字是回归,但是实际上它是处理分类问题的算法.简单的说回归问题和分类问题如下: 回归问 ...

  3. leetcode@ [174] Dungeon Game (Dynamic Programming)

    https://leetcode.com/problems/dungeon-game/ The demons had captured the princess (P) and imprisoned ...

  4. ZOJ-3593 One Person Game 概率DP

    题目链接:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=3593 带环的概率DP一般的做法是求出转移方程,然后高斯消元解方程 ...

  5. FZU 2176 easy problem (DFS序+树状数组)

    对于一颗树,dfs遍历为每个节点标号,在进入一个树是标号和在遍历完这个树的子树后标号,那么子树所有的标号都在这两个数之间,是一个连续的区间.(好神奇~~~) 这样每次操作一个结点的子树时,在每个点的开 ...

  6. [iOS基础控件 - 5.5] 代理设计模式 (基于”APP列表"练习)

    A.概述      在"[iOS基础控件 - 4.4] APP列表 进一步封装,初见MVC模式”上进一步改进,给“下载”按钮加上效果.功能      1.按钮点击后,显示为“已下载”,并且不 ...

  7. 使用Java原生代理实现数据注入

    本文由博主原创,转载请注明出处 完整源码下载地址 https://github.com/MatrixSeven/JavaAOP 上一篇,咱们说了使用Java原生代理实现AOP的简单例子,然么就不得不说 ...

  8. 阿里巴巴笔试整理系列 Session2 高级篇

    阿里一面:1. 入场就是红黑树,B数2. apache和nginx源码看过多少,平时看过什么技术论坛,还有没有看过更多的开源代码3. pthread 到自旋锁4. hadoop源码看过没5. 为什么选 ...

  9. ecshop后台admin文件夹任意更改名

    为了ecshop网站安全起见或不想泄露后台的路径,那么我们必须修改后台admin文件夹名称. 方法和步骤如下: 把原admin文件夹名改成edait为例来说明 首先,把商城根目录下的admin文件夹重 ...

  10. c#后台修改前台DOM的css属性

    <div id = 'div1' runat="server">haha</div> ----------- 后台代码中这样调用 div1.Style[&q ...