CSS3之box-shadow

前言

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

参数值 描述
h-shadow (X轴偏移量) 必需。水平阴影的位置。允许负值。
v-shadow (Y轴偏移量) 必需。垂直阴影的位置。允许负值。
blur (阴影模糊半径) 可选。模糊距离。
spread (阴影扩展半径) 可选。阴影的尺寸。
color (阴影颜色) 可选。阴影的颜色。请参阅 CSS 颜色值。
inset (投影方式) 可选。将外部阴影 (outset) 改为内部阴影。

文档来自=>W3Cschool

Step – 实例讲解

Step-1:

1
box-shadow: 0 0 5px #ccc;// x,y偏移量为0  5px的模糊半径

image.png

Step-2:

1
2
# 改变X轴偏移量
box-shadow: 5px 0 5px #ccc;// 水平偏移5px

image.png

Step-3:

1
2
# 改变Y轴偏移量
box-shadow: 0 5px 5px #ccc;// 垂直偏移5px

image.png

Step-4:

1
2
# 改变X、Y轴偏移量
box-shadow: 3px 5px 5px #ccc;

image.png

Step-5:

1
2
3
4
# 改变X、Y轴偏移量,可以为负值
box-shadow: -3px -5px 5px #ccc;
box-shadow: -3px 5px 5px #ccc;
box-shadow: 3px -5px 5px #ccc;

image.png

Step-6:

1
2
3
4
# 设置inset
box-shadow: -3px -5px 5px #ccc inset;
box-shadow: -3px 5px 5px #ccc inset;
box-shadow: 3px -5px 5px #ccc inset;

image.png

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

1
box-shadow:-3px -5px 5px blue inset,3px 5px 5px red,3px 5px 5px green inset,-3px -5px 5px black;

image.png

Step-8:

1
2
3
4
5
6
7
8
9
10
11
12
13
#Demo的实例

#html
<div class="main">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
#css
body,html{background: #fafafb;}
*{padding: 0;margin: 0;}
ul li{list-style: none;}
.main{padding: 100px 0}
.main ul{
width: 1200px;
margin: 0 auto;
}
.main ul li {
width: 360px;background: #fff;height: 360px;line-height:360px;display: block;float: left;margin-bottom: 60px;text-align: center;font-size: 100px;
color: #ccc;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
transition: all .4s;
-webkit-transition: all .4s;
-moz-transition: all .4s;
}
.main ul li:nth-child(3n+2){
margin-left:60px;margin-right:60px;
}

.main ul li:hover{
box-shadow: 1px 4px 10px 2px #ccc;
-webkit-box-shadow: 1px 4px 10px 2px #ccc;
-moz-box-shadow: 1px 4px 10px 2px #ccc;
transform: translateY(-2%);
}

Demo地址
在线操作

原文blog:http://codehtml.cn