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;       }    当我们需要对四边都进行一个设置的时候，就需要对四边的内容都进行一个设置，可以对其边距大小，阴影颜色等等都进行一个设置。这样就可以显示出你想要的样式了