css3中阴影怎么运用
的有关信息介绍如下:我们日常在写页面的时候,经常会为了增加网页效果给图片或者文字增加阴影效果,那么阴影到底应该怎么设置呢?
首先我们在运用这个属性的时候,要明白其到底具备那些功能,在css3中box-shadow共有6个属性,分别如下所示:
h-shadow必需。水平阴影的位置。允许负值。
v-shadow必需。垂直阴影的位置。允许负值。
blur可选。模糊距离。
spread可选。阴影的尺寸。
color可选。阴影的颜色。请参阅 CSS 颜色值。
inset可选。将外部阴影 (outset) 改为内部阴影。
这些我们在运用的时候可以针对性进行选择设置。不需要的就不要加上。
四边阴影都在外部显示出来,代码如下:
.test001 {
box-shadow: 0 0 10px #333;
width: 100px;
height: 100px;
margin: 30px 30px 60px 60px;
}
这种会对四边都进行一个阴影的展示,在box-shadow里面可以对阴影的颜色进行一个设置。
四边阴影都在内部显示出来,代码如下:
.test002 {
box-shadow: 0px 0px 10px #666 inset;
width: 60px;
height: 60px;
margin: 30px 30px 60px 60px;
}
相对于上面的写法,如果我们需要在内部进行一个阴影展示的话,就需要在box-shadow里面加上一个insert来进行一个标识,这样才可以将阴影展现出来,如果不加的话则是默认在外部显示。
两边阴影显示出来,代码如下:
.test003 {
box-shadow: 6px 6px 10px #999;
width: 60px;
height: 60px;
margin: 30px 30px 60px 60px;
}
如果我们不需要四边的阴影都可以看见的话,还可以设置为两边进行显示,通过对box-shadow的边距进行一个设置,这样就可以看出来。
两边阴影显示出来,代码如下:
.test004 {
box-shadow: -10px 0px 10px #f00, 0px -10px 10px #0f0, 10px 0px 10px #00f, 0px 10px 10px #ff0;
width: 60px;
height: 60px;
margin: 30px 30px 60px 60px;
}
当我们需要对四边都进行一个设置的时候,就需要对四边的内容都进行一个设置,可以对其边距大小,阴影颜色等等都进行一个设置。这样就可以显示出你想要的样式了