倒影(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 ...
随机推荐
- Magento 重新安装的方法
如果之前已经成功安装Magento, 不必再下载Magento进行重新安装,很多朋友删掉所有程序文件然后再上传一个magento程序包进行重新安 装, 这样做很耗时间. 其实只需把magento的根目 ...
- Bzoj4556: [Tjoi2016&Heoi2016]字符串 后缀数组
4556: [Tjoi2016&Heoi2016]字符串 Time Limit: 20 Sec Memory Limit: 128 MBSubmit: 169 Solved: 87[Sub ...
- 50道经典的JAVA编程题 (16-20)
50道经典的JAVA编程题 (16-20),用了快一个下午来做这10道题了,整理博客的时间貌似大于编程的时间啊..哈哈 [程序16]Nine.java 题目:输出9*9口诀. 1.程序分析:分行与列考 ...
- 安装ADT
ubuntu下安装android开发环境. 打开eclipse,help---install new software,安装adt,一直提示无法连接到dl-ssl.google.com 由https改 ...
- Objective-C Autorelease Pool 的实现原理
内存管理一直是学习 Objective-C 的重点和难点之一,尽管现在已经是 ARC 时代了,但是了解 Objective-C 的内存管理机制仍然是十分必要的.其中,弄清楚 autorelease 的 ...
- 【P3O是什么】P3O认证之项目组合、项目群和项目办公室
如何区分项目组合办公室与项目群和项目办公室? P3O®(Portfolio,Programmed and Project Offices-项目组合.项目群和项目办公室)是由英国商务部 OGC 于200 ...
- AQTime教程(1)
AQTime教程 1 简介 AQTime和MemProof都是AutomatedQA旗下的产品,AQTime比MemProof提供了更丰富强大的功能.该产品含有完整的性能和调试工具集,能够收集程序运行 ...
- hbase多用户入库,regionserver下线问题
近期对hbase多用户插入数据时,regionserver会莫名奇妙的关闭,regionserver的日志有很多异常: 如下: org.apache.hadoop.hbase.DroppedSnaps ...
- $_SERVER详细资料整理(转)
PHP编程中经常需要用到一些服务器的一些资料,特把$_SERVER的详细参数整理下,方便以后使用. $_SERVER['PHP_SELF'] #当前正在执行脚本的文件名,与 document root ...
- ZOJ 3827 Information Entropy 水题
Information Entropy Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://acm.zju.edu.cn/onlinejudge/sh ...