box-shadow实现四周阴影

Fork Me On Github
zodream 编程技术 Css 2018年12月

第一种

这个只是简单的进行四个方向的阴影,会出现阴影效果不真实,缺角不连贯

css
              

/*说明:(以上部边为例进行说明)
1. 对于上边,沿x轴方向的偏移量显然没有意义,设为0px;
2. 沿y轴正方向阴影进入div内部,不显示,因此写为负数;
3. 扩展半径不要写,或者写成0px,这样就不会影响其他的边;
4. 颜色自定;
5. 模糊程度按需要自定;
6. 下、左、右边阴影按规律类推。
*/
 box-shadow:    0px -10px 0px 0px #ff0000,   /*上边阴影  红色*/
                -10px 0px 0px 0px #3bee17,   /*左边阴影  绿色*/
                10px 0px 0px 0px #2279ee,    /*右边阴影  蓝色*/
                0px 10px 0px 0px #eede15;    /*下边阴影  黄色*/
1234567891011121314

第二种

真正意义上的全阴影,但是阴影的效果相对于单边阴影距离减半,所以要设得更大

css
      
div{
    width:250px;
    height:250px;
    background:greenyellow;
    box-shadow:black 0px 0px 10px;//将颜色提到前面,且将h-shadow,v-shadow设为0px,实现四周阴影
}
123456

【参考】

1.box-shadow实现四周阴影

2.DIV四个边框分别设置阴影样式

点击查看全文
0 575 0