导读：操作步骤/方法1首先我们在运用这个属性的时候，要明白其到底具备那些功能，在css3中box-shadow共有6个属性，分别如下所示：2h-shadow必需。水平阴影的位置。允许负值。3v-shadow必需。垂直阴影的位置。允许负值。4blur可选。模糊距离。5spread可选。阴影的尺寸。6color可选。阴影的颜色。请参阅CSS颜色值。7inset可选。将外部阴影(outset)改为内部阴影。8...
操作步骤/方法
1
首先我们在运用这个属性的时候，要明白其到底具备那些功能，在css3中box-shadow共有6个属性，分别如下所示：
2
h-shadow必需。水平阴影的位置。允许负值。
3
v-shadow必需。垂直阴影的位置。允许负值。
4
blur可选。模糊距离。
5
spread可选。阴影的尺寸。
6
color可选。阴影的颜色。请参阅CSS颜色值。
7
inset可选。将外部阴影(outset)改为内部阴影。
8
这些我们在运用的时候可以针对性进行选择设置。不需要的就不要加上。
9
四边阴影都在外部显示出来，代码如下：
10
.test001{
11
box-shadow:0010px#333;
12
width:100px;
13
height:100px;
14
margin:30px30px60px60px;
15
}
16
这种会对四边都进行一个阴影的展示，在box-shadow里面可以对阴影的颜色进行一个设置。
17
四边阴影都在内部显示出来，代码如下：
18
.test002{
19
box-shadow:0px0px10px#666inset;
20
width:60px;
21
height:60px;
22
margin:30px30px60px60px;
23
}
24
相对于上面的写法，如果我们需要在内部进行一个阴影展示的话，就需要在box-shadow里面加上一个insert来进行一个标识，这样才可以将阴影展现出来，如果不加的话则是默认在外部显示。
25
两边阴影显示出来，代码如下：
26
.test003{
27
box-shadow:6px6px10px#999;
28
width:60px;
29
height:60px;
30
margin:30px30px60px60px;
31
}
32
如果我们不需要四边的阴影都可以看见的话，还可以设置为两边进行显示，通过对box-shadow的边距进行一个设置，这样就可以看出来。
33
两边阴影显示出来，代码如下：
34
.test004{
35
box-shadow:-10px0px10px#f00,0px-10px10px#0f0,10px0px10px#00f,0px10px10px#ff0;
36
width:60px;
37
height:60px;
38
margin:30px30px60px60px;
39
}
40
当我们需要对四边都进行一个设置的时候，就需要对四边的内容都进行一个设置，可以对其边距大小，阴影颜色等等都进行一个设置。这样就可以显示出你想要的样式了
END
以上就是小编为大家介绍的css3中阴影怎么运用的全部内容，如果大家还对相关的内容感兴趣，请持续关注上海建站网！
标签：
内容声明：网站所展示的内容均由第三方用户投稿提供，内容的真实性、准确性和合法性均由发布用户负责。上海建站网对此不承担任何相关连带责任。上海建站网遵循相关法律法规严格审核相关关内容，如您发现页面有任何违法或侵权信息，欢迎向网站举报并提供有效线索，我们将认真核查、及时处理。感谢您的参与和支持！
