详解CSS3属性box-shadow（附示例效果）

box-shadow:向框添加一个或多个阴影

语法：

1	box-shadow: h-shadow v-shadow blur spread color inset ;

注释：

box-shadow 向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表，每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。

值	描述
h-shadow	必需。水平阴影的位置。允许负值。
v-shadow	必需。垂直阴影的位置。允许负值。
blur	可选。模糊距离。
spread	可选。阴影的尺寸。
color	可选。阴影的颜色。请参阅 CSS 颜色值。
inset	可选。将外部阴影 (outset) 改为内部阴影。

box-shadow完整在线示例

box-shadow示例效果一

1	.effect 1 { -webkit-box-shadow: 0 10px 6px -6px #777 ; -moz-box-shadow: 0 10px 6px -6px #777 ; box-shadow: 0 10px 6px -6px #777 ; }

box-shadow示例效果二

1 2 3

.effect 2 { position : relative ;} .effect 2: before, .effect 2: after { z-index : -1 ; position : absolute ; content : "" ; bottom : 15px ; left : 10px ; width : 50% ; top : 80% ; max-width : 300px ; background : #777 ; -webkit-box-shadow: 0 15px 10px #777 ; -moz-box-shadow: 0 15px 10px #777 ; box-shadow: 0 15px 10px #777 ; -webkit-transform: rotate( -3 deg); -moz-transform: rotate( -3 deg); -o-transform: rotate( -3 deg); -ms-transform: rotate( -3 deg); transform: rotate( -3 deg); } .effect 2: after { -webkit-transform: rotate( 3 deg); -moz-transform: rotate( 3 deg); -o-transform: rotate( 3 deg); -ms-transform: rotate( 3 deg); transform: rotate( 3 deg); right : 10px ; left : auto ; }

box-shadow示例效果三

1 2

.effect 3 { position : relative ; } .effect 3: before { z-index : -1 ; position : absolute ; content : "" ; bottom : 15px ; left : 10px ; width : 50% ; top : 80% ; max-width : 300px ; background : #777 ; -webkit-box-shadow: 0 15px 10px #777 ; -moz-box-shadow: 0 15px 10px #777 ; box-shadow: 0 15px 10px #777 ; -webkit-transform: rotate( -3 deg); -moz-transform: rotate( -3 deg); -o-transform: rotate( -3 deg); -ms-transform: rotate( -3 deg); transform: rotate( -3 deg); }

box-shadow示例效果四

1 2

.effect 4 { position : relative ; } .effect 4: after { z-index : -1 ; position : absolute ; content : "" ; bottom : 15px ; right : 10px ; left : auto ; width : 50% ; top : 80% ; max-width : 300px ; background : #777 ; -webkit-box-shadow: 0 15px 10px #777 ; -moz-box-shadow: 0 15px 10px #777 ; box-shadow: 0 15px 10px #777 ; -webkit-transform: rotate( 3 deg); -moz-transform: rotate( 3 deg); -o-transform: rotate( 3 deg); -ms-transform: rotate( 3 deg); transform: rotate( 3 deg); }

box-shadow示例效果五

1 2 3

.effect 5 { position : relative ; } .effect 5: before, .effect 5: after { z-index : -1 ; position : absolute ; content : "" ; bottom : 25px ; left : 10px ; width : 50% ; top : 80% ; max-width : 300px ; background : #777 ; -webkit-box-shadow: 0 35px 20px #777 ; -moz-box-shadow: 0 35px 20px #777 ; box-shadow: 0 35px 20px #777 ; -webkit-transform: rotate( -8 deg); -moz-transform: rotate( -8 deg); -o-transform: rotate( -8 deg); -ms-transform: rotate( -8 deg); transform: rotate( -8 deg); } .effect 5: after { -webkit-transform: rotate( 8 deg); -moz-transform: rotate( 8 deg); -o-transform: rotate( 8 deg); -ms-transform: rotate( 8 deg); transform: rotate( 8 deg); right : 10px ; left : auto ; }

box-shadow示例效果六

1 2

.effect 6 { position : relative ; -webkit-box-shadow: 0 1px 4px rgba( 0 , 0 , 0 , 0.3 ), 0 0 40px rgba( 0 , 0 , 0 , 0.1 ) inset ; -moz-box-shadow: 0 1px 4px rgba( 0 , 0 , 0 , 0.3 ), 0 0 40px rgba( 0 , 0 , 0 , 0.1 ) inset ; box-shadow: 0 1px 4px rgba( 0 , 0 , 0 , 0.3 ), 0 0 40px .effect 6: before, .effect 6: after { content : "" ; position : absolute ; z-index : -1 ; -webkit-box-shadow: 0 0 20px rgba( 0 , 0 , 0 , 0.8 ); -moz-box-shadow: 0 0 20px rgba( 0 , 0 , 0 , 0.8 ); box-shadow: 0 0 20px rgba( 0 , 0 , 0 , 0.8 ); top : 50% ; bottom : 0 ; left : 10px ; right : 10px ; -moz-border-radius: 100px / 10px ; border-radius: 100px / 10px ; } .effect 6: after { right : 10px ; left : auto ; -webkit-transform: skew( 8 deg) rotate( 3 deg); -moz-transform: skew( 8 deg) rotate( 3 deg); -ms-transform: skew( 8 deg) rotate( 3 deg); -o-transform: skew( 8 deg) rotate( 3 deg); transform: skew( 8 deg) rotate( 3 deg); }

box-shadow示例效果七

1 2 3

.effect 7 { position : relative ; -webkit-box-shadow: 0 1px 4px rgba( 0 , 0 , 0 , 0.3 ), 0 0 40px rgba( 0 , 0 , 0 , 0.1 ) inset ; -moz-box-shadow: 0 1px 4px rgba( 0 , 0 , 0 , 0.3 ), 0 0 40px rgba( 0 , 0 , 0 , 0.1 ) inset ; box-shadow: 0 1px 4px rgba( 0 , 0 , 0 , 0.3 ), 0 0 40px rgba( 0 , 0 , 0 , 0.1 ) inset ; } .effect 7: before, .effect 7: after { content : "" ; position : absolute ; z-index : -1 ; -webkit-box-shadow: 0 0 20px rgba( 0 , 0 , 0 , 0.8 ); -moz-box-shadow: 0 0 20px rgba( 0 , 0 , 0 , 0.8 ); box-shadow: 0 0 20px rgba( 0 , 0 , 0 , 0.8 ); top : 0 ; bottom : 0 ; left : 10px ; right : 10px ; -moz-border-radius: 100px / 10px ; border-radius: 100px / 10px ; } .effect 7: after { right : 10px ; left : auto ; -webkit-transform: skew( 8 deg) rotate( 3 deg); -moz-transform: skew( 8 deg) rotate( 3 deg); -ms-transform: skew( 8 deg) rotate( 3 deg); -o-transform: skew( 8 deg) rotate( 3 deg); transform: skew( 8 deg) rotate( 3 deg); }

box-shadow示例效果八

1 2 3

.effect 8 { position : relative ; -webkit-box-shadow: 0 1px 4px rgba( 0 , 0 , 0 , 0.3 ), 0 0 40px rgba( 0 , 0 , 0 , 0.1 ) inset ; -moz-box-shadow: 0 1px 4px rgba( 0 , 0 , 0 , 0.3 ), 0 0 40px rgba( 0 , 0 , 0 , 0.1 ) inset ; box-shadow: 0 1px 4px rgba( 0 , 0 , 0 , 0.3 ), 0 0 40px rgba( 0 , 0 , 0 , 0.1 ) inset ; } .effect 8: before, .effect 8: after { content : "" ; position : absolute ; z-index : -1 ; -webkit-box-shadow: 0 0 20px rgba( 0 , 0 , 0 , 0.8 ); -moz-box-shadow: 0 0 20px rgba( 0 , 0 , 0 , 0.8 ); box-shadow: 0 0 20px rgba( 0 , 0 , 0 , 0.8 ); top : 10px ; bottom : 10px ; left : 0 ; right : 0 ; -moz-border-radius: 100px / 10px ; border-radius: 100px / 10px ; } .effect 8: after { right : 10px ; left : auto ; -webkit-transform: skew( 8 deg) rotate( 3 deg); -moz-transform: skew( 8 deg) rotate( 3 deg); -ms-transform: skew( 8 deg) rotate( 3 deg); -o-transform: skew( 8 deg) rotate( 3 deg); transform: skew( 8 deg) rotate( 3 deg); }

注：善用CSS3的特性，可以大大提供我们的工作效率！