零基础建站培训教程介绍

当前位置:

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,实现四周阴影
}

效果如下:

CSS设置盒子四周阴影box-shadow

发表评论

学做网站论坛零基础学建网站课程