您的位置：首页 > Web前端 > CSS

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

2015-01-09 16:18 826 查看

box-shadow 使用方法

设置块阴影

语法：

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

取值：

<length> <length> <length>? <length>? || <color>：阴影水平偏移值（可取正负值）；阴影垂直偏移值（可取正负值）；阴影模糊值；阴影颜色

说明：

引擎类型	Gecko	Webkit	Presto
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，这时阴影的效果就只是单边的

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航