CSS3中制作倒影box-reflect
目前仅在Chrome、Safari和Opera浏览器下支持
box-reflect:none | <direction> <offset>? <mask-box-image>?
由于此属性并不是W3C标准属性,在具体使用之时,还是需要添加浏览器的私有属性,根据浏览器的兼容性,使用box-reflect
时需要添加-webkit
和前缀:
-webkit-box-reflect:none | <direction> <offset>? <mask-box-image>?
box-reflect:none | <direction> <offset>? <mask-box-image>?
可惜的是在Firefox下并不支持这个属性,不过值得庆幸的是,在Firefox下可以通过-moz-element()
来模拟实现.
从box-reflect
语法中可以得知,其主要包括以下几个属性值:
none
:此值为box-reflect
默认值,表示无倒影效果;<direction>
:此值表示box-reflect
生成倒影的方向,主要包括以下几个值:above
:表示生成的倒影在对象(原图)的上方;below
:表示生成的倒影在对象(原图)的下方;left
:表示生成的倒影在对象(原图)的左侧;right
:表示生成的倒影在对象(原图)的右侧;
<offset>
:用来设置生成倒影与对象(原图)之间的间距,其取值可以是固定的像素值,也可以是百分比值,如:- :使用长度值来设置生成的倒影与原图之间的间距,只要是CSS中的长度单位都可以,此值可以使用负值;
- :使用百分比来设置生成的倒影与原图之间的间距,此值也可以使用负值
- <mask-box-image>:用来设置倒影的遮罩效果,可以是背景图片,也可以是渐变生成的背景图像。
当对象(原图)没有足够多的空间预留给生成的倒影放置的时候,将不会显示出来。
第三个属性<mask-box-image>
给生成的倒影添加遮罩效果,我们可以通过两种方式第一种是渐变生成的背景图像,第二种是外部的背景图像。
.box-reflect img {
-webkit-box-reflect: below 0 -webkit-linear-gradient(top,rgba(250,250,250,0),rgba(250,250,250,.0) 30%,rgba(250,250,250,0.3));
box-reflect: below 0 -webkit-linear-gradient(top,rgba(250,250,250,0),rgba(250,250,250,.0) 30%,rgba(250,250,250,0.3));
}
只能使用线性渐变给生成的倒影添加遮罩效果,而径向渐变到目前还无任何效果。另外有一点特别需要提醒大家,给生成的倒影添加遮罩效果的时候,如果没有设置显式的间距<offset>
将会让box-reflect
失效。也就是说,当box-reflect
属性中的<mask-box-image>
属性值出现时,必须显式的设置<offset>
值,如果不需要间距,将其设置为0
。
用于遮罩的图片必须是png
格式图片。
.box-reflect img {
-webkit-box-reflect: below 0 url(http://cdn.w3cplus.com/sites/default/files/blogs/2014/1405/css-masking.png);
box-reflect: below 0 url(http://cdn.w3cplus.com/sites/default/files/blogs/2014/1405/css-masking.png);
}
你将看到这样的效果:
到目前为止,box-reflect
属性仅webkit
内核的浏览器对其支持,在Firefox中有一个替代方案。那就是使用-moz-element()
来替代
在图片外面,我们有一个容器div
,并且给他一个id名称moz-reflect
:
<div class="box-reflect" id="moz-reflect">
<img src="http://cdn.w3cplus.com/sites/default/files/blogs/2014/1405/box-reflect.jpg" alt="" height="200" /></div>
我们通过伪类:after
来模拟:
.box-reflect {
margin: 10px auto;
width: 200px;
}
#moz-reflect:after {
content: "";
display: block;
background: -moz-element(#moz-reflect) no-repeat;
width: auto;
height: 200px;
-moz-transform: scaleY(-1);
}
模拟出来的效果如下:
转载来自:http://www.w3cplus.com/css3/css3-box-reflect.html
CSS3中制作倒影box-reflect的更多相关文章
- css3中display和box小结
display:table用处: 1.创建登高列 2.实现大小不确定元素的垂直居中 3.容器内子项目数目未知,子项目平均分配容器的水平空间 float必须指定其宽度才行,不确定的话就用display: ...
- 使用 HTML5、CSS3 和 MathML 在 EPUB 3 中制作版式丰富的出版物
探索用于高级排版和印刷的新一代开放电子书标准 EPUB 3.0 是最新的行业标准 XML 电子书格式,它采用了 HTML5 和 CSS3,因而融入了现代 Web 技术.它重点关注 XML 驱动的工具包 ...
- css3中的制作动画小总结
系列教程 CSS3属性中有关于制作动画的三个属性:Transform,Transition,Animation: Transform 在CSS3中transform主要包括以下几种:旋转rotate. ...
- css3-10 css3中的边框样式有哪几种
css3-10 css3中的边框样式有哪几种 一.总结 一句话总结:1.border-radius 2. box-shadow 3.border-image三种,box一种border两种 1.css ...
- CSS3中惊艳的gradient
以前曾经记录过linear-gradient(线性渐变)和 radial-gradient(径向渐变)的语法. 可以参考<CSS3中border-radius.box-shadow与gradie ...
- CSS3中flexbox如何实现水平垂直居中和三列等高布局
最近这些天都在弥补css以及css3的基础知识,在打开网页的时候,发现了火狐默认首页上有这样一个东西.
- CSS3中的变形与动画【转】
最近在学习制作移动端的页面,做了一个微信页面的小demo,其中用到了很多的CSS3新增的内容,其中就有CSS3新增的变形和动画.其实这种CSS3的动画效果用JS也可以实现,不过CSS3能开启硬件加速, ...
- 使用 CSS3 & jQuery 制作漂亮的书签动画
今天的教程是关于创建使用 CSS 旋转变换和 JavaScript 制作动画书签效果.我们的想法是展现出样书状结构,使单一的色板或列表点击切换.当点击其中一项,我们就会旋转以显示所选择的项目. 在线演 ...
- 太可爱了!CSS3 & SVG 制作的米老鼠钟表
米老鼠是大家非常熟悉的迪斯尼动画形象.这是一个可爱的效果,结合 CSS & SVG 图形实现的米老鼠钟表效果.Web 技术让很多生活中的事物都能搬到网上去,后面的推荐阅读也有很多的效果,感兴趣 ...
随机推荐
- Access restriction: The type 'JPEGCodec' is not API
问题 今天导入项目时Eclipse报错如下: Access restriction: The type 'JPEGCodec' is not API (restriction on required ...
- Verify the Developer App certificate for youraccount is trusted on your device
运行时报错-Verify the Developer App certificate for youraccountis trusted on your device. Open Settings ...
- Python常用模块之hashlib(加密)
Python常用模块之hashlib(加密) Python里面的hashlib模块提供了很多加密的算法,这里介绍一下hashlib的简单使用事例,用hashlib的md5算法加密数据import ha ...
- 解决thymeleaf严格html5校验的方法
用的是springboot加thyemleaf做静态模板. 然后会有个很烦的东西,就这个静态模板对html的格式非常严格,导致很多框架的格式都用不了,然后这里有个解除的方法: 1.在pom中添加依赖: ...
- git stash暂存当前正在进行的工作
git stash 可用来暂存当前正在进行的工作, 比如想pull 最新代码, 又不想加新commit, 或者另外一种情况,为了fix 一个紧急的bug, 先stash, 使返回到自己上一个comm ...
- 一些API
/** * Goto the specified frame index, and pause at this index. * @param startIndex The animation wil ...
- [转]Android应用自动更新功能的代码实现
本文转自:http://www.cnblogs.com/coolszy/archive/2012/04/27/2474279.html 由于Android项目开源所致,市面上出现了N多安卓软件市场.为 ...
- matlab均方根误差
Matlab均方根误差的计算 http://blog.sina.com.cn/s/blog_6210f654010308kv.html
- uvm_reg_sequence——寄存器模型(六)
寄存器模型 uvm_reg_sequence是UVM自带所有register sequence 的基类. 该类包含model, adapter, reg_seqr(uvm_sequencer). 感觉 ...
- 用python格式化小说txt
下载了<无人生还>的txt版.传到手机,发现阅读器识别得不够好. 原文格式如下: 第一章 一 沃格雷夫法官先生新近离任退休,现在正在头等车厢的吸烟室里,倚角而坐,一 边喷着雪茄烟,一边兴致 ...