特别声明:如果您喜欢小站的内容,可以点击申请会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!或添加QQ:874472854(^_^)
在Web制作中,有些时候需要实现一些倒影的效果。比如说,你看到一个美女,你想从另一个角度来看这个MM的风姿,如下图:
在早前要实现这样的效果我们都必须借助于类似于Photoshop这样的制作图软件来实现,然后通过引入一张image。那么除了图片,我们有没有别的方法能实现呢?值得庆幸的是,到目前为之,CSS3有一个属性box-reflect
可以实现。那么今天我们要给大家介绍的就是这个属性的应用。
浏览器的兼容性
box-reflect
属性虽然能帮助我们实现上图的效果,但到目前为止,浏览器对其支持性并不是非常的完美。在一些浏览器下还是无法直接通过这个属性来达到我们要的效果。那么到目前为止有哪些浏览器能支持这个属性呢?我们来看下面的表格:
虽然目前仅在Chrome、Safari和Opera浏览器下支持,但这并不影响我们来学习这个属性的应用,有必无患吧。
box-reflect语法
要了解box-reflect
属性如何使用,我们得先知道其语法怎么,这样才能更好的清楚使用这个属性。其基本语法如下:
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取值说明
从box-reflect
语法中可以得知,其主要包括以下几个属性值:
-
none
:此值为box-reflect
默认值,表示无倒影效果; -
<direction>
:此值表示box-reflect
生成倒影的方向,主要包括以下几个值:-
above
:表示生成的倒影在对象(原图)的上方; -
below
:表示生成的倒影在对象(原图)的下方; -
left
:表示生成的倒影在对象(原图)的左侧; -
right
:表示生成的倒影在对象(原图)的右侧;
-
-
<offset>
:用来设置生成倒影与对象(原图)之间的间距,其取值可以是固定的像素值,也可以是百分比值,如:-
: 使用长度值来设置生成的倒影与原图之间的间距,只要是CSS中的长度单位都可以,此值可以使用负值; -
: 使用百分比来设置生成的倒影与原图之间的间距,此值也可以使用负值
-
- <mask-box-image>:用来设置倒影的遮罩效果,可以是背景图片,也可以是渐变生成的背景图像。
仅从理论上介绍,似乎不太生动,接下来,我们以实例来介绍。
倒影的方向
box-reflect
倒影方向跟我们CSS中的margin
和padding
类似,包括上、右、下、和左四个方向,每个方向都可以使用关键词来定义。下面我们能过简单的示例向大家演示这样的效果:
倒影在对象的上方
假设我们需要给一张图片做倒影效果,其结构其实非常简单:
<div class="box-reflect"><img src="//imgt9.bdstatic.com/it/u=2,687775882&fm=19&gp=0.jpg" alt="" height="200"/></div>
根据前面的语法介绍,要让倒影在对象的上方,我们只需要给box-reflect
属性取值为above
即可:
.box-reflect img {
-webkit-box-reflect: above;
box-reflect: above;
}
其效果如下:
如需转载,烦请注明出处:https://www.w3cplus.com/css3/css3-box-reflect.html
如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!