CSS3 box-shadow 属性设置盒四周阴影
CSS是控制网页HTML的显示效果,在网站制作过程中可以通过CSS的box-shadow属性来控制盒阴影。(相关教程:html入门教程)
语法:
box-shadow: h-shadow v-shadow blur spread color inset;
注意参数顺序不要乱写,尽量标准,多个阴影间,逗号隔开
另外还可以单独设置盒模型的四个边的阴影样式。
box-shadow: 0px -10px 0px 0px #ff0000, /*上边阴影 红色*/
-10px 0px 0px 0px #3bee17, /*左边阴影 绿色*/
10px 0px 0px 0px #2279ee, /*右边阴影 蓝色*/
0px 10px 0px 0px #eede15; /*下边阴影 黄色*/
设置盒子四周阴影效果:
div{
width:200px;
height:200px;
background:green;
box-shadow:black 0px 0px 10px;//将颜色提到前面,且将h-shadow,v-shadow设为0px,实现四周阴影
}
效果如下: