开发者社区> 技术小阿哥> 正文

CSS3 box-reflect 属性

简介:
+关注继续查看

语法:

box-reflect:包括3个值。

1. direction 定义方向,取值包括 above 、 below 、 left 、 right。

above:

指定倒影在对象的上边

below:

指定倒影在对象的下边

left:

指定倒影在对象的左边

right:

指定倒影在对象的右边

 

2. offset定义反射偏移的距离,取值包括数值或百分比,其中百分比根据对象的尺寸进行确定。默认为0。
用长度值来定义倒影与对象之间的间隔。可以为负值。用百分比来定义倒影与对象之间的间隔。可以为负值。

 

3. mask-box-image定义遮罩图像,该图像将覆盖投影区域。如果省略该参数值,则默认为无遮罩图像。

取值:

none:无遮罩图像:

使用绝对或相对地址指定遮罩图像。

使用线性渐变创建遮罩图像。

使用径向(放射性)渐变创建遮罩图像。

使用重复的线性渐变创建背遮罩像。

使用重复的径向(放射性)渐变创建遮罩图像。

说明:

设置或检索对象倒影。

对应的脚本特性为boxReflect。

如下:

 1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>无标题文档</title> 6 <style> 7 .box{ 8     width:200px; 9     height:200px;10     background:-webkit-linear-gradient(left,red,yellow,green);11     transform:scale(-1,1);12     -webkit-box-reflect:below 10px -webkit-linear-gradient(transparent,transparent 50%,rgba(0,0,0,.8)); 13 }14 </style>15 </head>16 17 <body>18 <div class="box"></div>19 </body>20 </html>

上面是颜色线性渐变的倒影,同样咱们的图片也可做倒影特效。


}



本文转自 sshpp 51CTO博客,原文链接:http://blog.51cto.com/12902932/1927037,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
独家揭秘:阿里小程序的一云多端!看这篇就够了!
阿里巴巴小程序一云多端的整体战略,以及阿里小程序后续为开发者提供的云服务(云应用、云开发等)、开发者工具链(IDE、插件、SDK等)、跨端框架能力说明。同时结合繁星计划后续提供给开发者的扶持和ISV的权益体系做一个整体的介绍。
27541 0
计算机图形学遇上深度学习
今日,TensorFlow 宣布推出 TensorFlow Graphics,该工具结合计算机图形系统和计算机视觉系统,可利用大量无标注数据,解决复杂 3D 视觉任务的数据标注难题,助力自监督训练。
2347 0
PostgreSQL 锁
锁的类型 /* NoLock is not a lock mode, but a flag value meaning "don't get a lock" */ #define NoLock 0 #define AccessS...
1215 0
GDB 调试 Mysql 实战(一)源码编译安装
下载源码 git clone https://github.com/mysql/mysql-server.git cd mysql-server git checkout 5.7 编译安装 安装依赖 yum install -y cmake make gcc gcc-c++ ncurses-dev...
1049 0
HSF/Dubbo序列化时的LocalDateTime, Instant的性能问题
### 来源 在对Dubbo新版本做性能压测时,无意中发现对用例中某个TO(Transfer Object)类的一属性字段稍作修改,由Date变成LocalDateTime,结果是吞吐量由近5w变成了2w,RT由9ms升指90ms。
2512 0
CDN的HTTPS配置及故障排除
相较于HTTP协议来说,HTTPS协议在网络链路中传输更具有安全可靠性,因为它通过SSL证书在链路中间对我们七层的网络包做了加密,进而防止了一些恶意的内容劫持。针对于这种场景,阿里云CDN也提供了相关的功能,可以支持客户端到CDN L1节点的HTTPS的协议。
1613 0
13692
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
性能优化方法论
立即下载
手把手学习日志服务SLS,云启实验室实战指南
立即下载