使用CSS3制作倒影

如果看完了还不过瘾?想和作者深聊相关话题,可以点击这里向作者提问!

在Web制作中,有些时候需要实现一些倒影的效果。比如说,你看到一个美女,你想从另一个角度来看这个MM的风姿,如下图:

使用CSS3制作倒影

在早前要实现这样的效果我们都必须借助于类似于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中的marginpadding类似,包括上、右、下、和左四个方向,每个方向都可以使用关键词来定义。下面我们能过简单的示例向大家演示这样的效果:

倒影在对象的上方

假设我们需要给一张图片做倒影效果,其结构其实非常简单:

<div class="box-reflect"><img src="http://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;
}

其效果如下:

使用CSS3制作倒影

 

DEMO

特别提示:在此示例中,我们为倒影提供了一个空白区,如果没有提供空白区,将没有任何效果显示。在上面的示例基础上做一下修改,我把.box-reflectmargin做一下修改:

.box-reflect {
  margin: 0 auto 210px;
  width: 200px;
}
.box-reflect img {
  -webkit-box-reflect: above;
  box-reflect: above;
}

你将会看到一个非常奇怪的效果,就是倒影没有了:

使用CSS3制作倒影

 

DEMO

如果你要问我为什么?说真的,我也不清楚,我只能认为:如果倒影在对像上方,如果没有预留一定的空间,将会示为无法看见。

剩余70%内容付费后可查看
* 请输入阅读码(忘记阅读码?

如需转载,烦请注明出处:https://www.w3cplus.com/css3/css3-box-reflect.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部