CSS3 图片投影

[b]box-reflect[/b]
none:默认值,表示无倒影效果;
<direction>:此值表示box-reflect生成倒影的方向,主要包括以下几个值:
above:表示生成的倒影在对象(原图)的上方;
below:表示生成的倒影在对象(原图)的下方;
left:表示生成的倒影在对象(原图)的左侧;
right:表示生成的倒影在对象(原图)的右侧;
<offset>:用来设置生成倒影与对象(原图)之间的间距,其取值可以是固定的像素值,也可以是百分比值,如:
使用长度值来设置生成的倒影与原图之间的间距,只要是CSS中的长度单位都可以,此值可以使用负值;
使用百分比来设置生成的倒影与原图之间的间距,此值也可以使用负值
<mask-box-image>:用来设置倒影的遮罩效果,可以是背景图片,也可以是渐变生成的背景图像。

[b]值得注意:为倒影提供了一个空白区,如果没有提供空白区,将没有任何效果显示![/b]
这就要求父容器的margin在倒影的方向有对应的空间。

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

[url]http://www.w3cplus.com/css3/css3-box-reflect.html[/url]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值