css实现阴影效果(box-shadow)

box-shadow 使用方法

设置块阴影

语法:

box-shadow<length> <length> <length> <length> || <color>

取值:

<length>  <length>  <length>?  <length>? ||  <color>
阴影水平偏移值(可取正负值);阴影垂直偏移值(可取正负值);阴影模糊值;阴影颜色
 

 

说明:

引擎类型GeckoWebkitPresto
Box-shadow-moz-box-shadow-webkit-border-shadow 

 

在IE中,可以使用filter:shadow来实现阴影效果, 同一个filter是可以使用多次的。由于shadow做阴影时只有两个边有效果, 换角度多投几次就行了。。

 

.shadow{
width: 200px; height: 300px; margin: 50px auto;
-moz-box-shadow: 0 0 10px #E0E9F0; /* FireFox */
-webkit-box-shadow: 0 0 10px #E0E9F0;  /* Chrome && Safari */
box-shadow: 0 0 10px #E0E9F0; /* Opera */
filter: progid:DXImageTransform.Microsoft.Shadow(color=#EAF3F9,direction=45,strength=6)
progid:DXImageTransform.Microsoft.Shadow(color=#EAF3F9,direction=135,strength=6)
progid:DXImageTransform.Microsoft.Shadow(color=#EAF3F9,direction=225,strength=6)
progid:DXImageTransform.Microsoft.Shadow(color=#EAF3F9,direction=315,strength=6);  /* IE 6.0+ */
}

 

内阴影效果(偏移值都为正):

#box-shadow{	-moz-box-shadow:5px 5px 5px #999 inset;               /* For Firefox3.6+ */	-webkit-box-shadow:5px 5px 5px #999 inset;            /* For Chrome5+, Safari5+ */	box-shadow:5px 5px 5px #999 inset;                    /* For Latest Opera */}

内阴影效果(偏移值都为负):

#box-shadow2{	-moz-box-shadow:-5px -5px 5px #999 inset;             /* For Firefox3.6+ */	-webkit-box-shadow:-5px -5px 5px #999 inset;          /* For Chrome5+, Safari5+ */	box-shadow:-5px -5px 5px #999 inset;                  /* For Latest Opera */}

内阴影效果(水平偏移为负,垂直偏移为负):

#box-shadow3{	-moz-box-shadow:-5px 5px 5px #999 inset;              /* For Firefox3.6+ */	-webkit-box-shadow:-5px 5px 5px #999 inset;           /* For Chrome5+, Safari5+ */	box-shadow:-5px 5px 5px #999 inset;                   /* For Latest Opera */}

内阴影效果(水平偏移为正,垂直偏移为负):

#box-shadow4{	-moz-box-shadow:5px -5px 5px #999 inset;              /* For Firefox3.6+ */	-webkit-box-shadow:5px -5px 5px #999 inset;           /* For Chrome5+, Safari5+ */	box-shadow:5px -5px 5px #999 inset;                   /* For Latest Opera */}

* 还可以试试把某个偏移值设置为0,这时阴影的效果就只是单边的

转载于:https://www.cnblogs.com/mixzo/p/4213614.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值