倒影(box-reflect)
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)的更多相关文章
- css3渐变、背景、倒影、变形
一.背景切割background-clip 语法:background-clip:border-box | padding-box | content-box: border-box 超出b ...
- 在github上写个人简历——最简单却又不容易的内容罗列
前篇博客分享了一下自己初入github的过程,傻瓜式一步步搭建好主页后,终于该做正事儿了——写简历.在脑袋中构思了很多版本,最后终于决定,先写一个最传统的版本,于是我在箱子中翻出我word版本的简历, ...
- 前端面试基础-html篇之CSS3新特性
CSS3的新特性(个人总结)如下 过度(transiton) 动画(animation) 形状转换 transform:适用于2D或3D转换的元素 transform-origin:转换元素的位置(围 ...
- 倒影问题(reflect:below)
这个例子灵感来源于实现一个登录框下方的倒影: .box { width: 300px; height: 200px; border: 1px solid #1f637b; -webkit-box-re ...
- CSS3 Notes: -webkit-box-reflect实现倒影
平常我们要实现倒影的效果,一般的做法是使用多个DOM元素绝对定位+scale(负-1)或者rotate.这种方法的缺点是占据空间以及DOM元素过多. 在使用webkit内核的浏览器中(chrome,s ...
- android 实现倒影
首先,文章中出现的Gallery 已经不再适用,替代方法请看我的另一篇文章http://blog.csdn.net/xiangzhihong8/article/details/51120460 不过对 ...
- CSS3_盒阴影_倒影_盒子大小可调
1. 盒阴影 会产生一个或者多个阴影 使用: (多个阴影,以逗号隔开) /* (不能为负值) (可以负值) */ /* 水平方向偏移量 垂直反向偏移量 模糊程度 扩散程度 颜色 是否是内阴影; ...
- 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 ...
- jquery和CSS3带倒影的3D万花筒旋转动画特效效果演示
<!DOCTYPE html> <html> <head> <title></title> <meta charset='utf-8' ...
- Reflect个人记录
Reflect是一个内置方法,并不能通过构造函数的来进行构建 Reflect.construct: 与new操作父有一些类似,相当于new target(...) 例: 我们先自己定义一个类 clas ...
随机推荐
- North America Qualifier (2015)
https://icpc.baylor.edu/regionals/finder/north-america-qualifier-2015 一个人打.... B 概率问题公式见代码 #include ...
- 机器学习总结之逻辑回归Logistic Regression
机器学习总结之逻辑回归Logistic Regression 逻辑回归logistic regression,虽然名字是回归,但是实际上它是处理分类问题的算法.简单的说回归问题和分类问题如下: 回归问 ...
- leetcode@ [174] Dungeon Game (Dynamic Programming)
https://leetcode.com/problems/dungeon-game/ The demons had captured the princess (P) and imprisoned ...
- ZOJ-3593 One Person Game 概率DP
题目链接:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=3593 带环的概率DP一般的做法是求出转移方程,然后高斯消元解方程 ...
- FZU 2176 easy problem (DFS序+树状数组)
对于一颗树,dfs遍历为每个节点标号,在进入一个树是标号和在遍历完这个树的子树后标号,那么子树所有的标号都在这两个数之间,是一个连续的区间.(好神奇~~~) 这样每次操作一个结点的子树时,在每个点的开 ...
- [iOS基础控件 - 5.5] 代理设计模式 (基于”APP列表"练习)
A.概述 在"[iOS基础控件 - 4.4] APP列表 进一步封装,初见MVC模式”上进一步改进,给“下载”按钮加上效果.功能 1.按钮点击后,显示为“已下载”,并且不 ...
- 使用Java原生代理实现数据注入
本文由博主原创,转载请注明出处 完整源码下载地址 https://github.com/MatrixSeven/JavaAOP 上一篇,咱们说了使用Java原生代理实现AOP的简单例子,然么就不得不说 ...
- 阿里巴巴笔试整理系列 Session2 高级篇
阿里一面:1. 入场就是红黑树,B数2. apache和nginx源码看过多少,平时看过什么技术论坛,还有没有看过更多的开源代码3. pthread 到自旋锁4. hadoop源码看过没5. 为什么选 ...
- ecshop后台admin文件夹任意更改名
为了ecshop网站安全起见或不想泄露后台的路径,那么我们必须修改后台admin文件夹名称. 方法和步骤如下: 把原admin文件夹名改成edait为例来说明 首先,把商城根目录下的admin文件夹重 ...
- c#后台修改前台DOM的css属性
<div id = 'div1' runat="server">haha</div> ----------- 后台代码中这样调用 div1.Style[&q ...