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示例效果一
|
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的特性，可以大大提供我们的工作效率！
扫一扫
431
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
