第一种
这个只是简单的进行四个方向的阴影，会出现阴影效果不真实，缺角不连贯
/*说明：（以上部边为例进行说明）
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
第二种
真正意义上的全阴影，但是阴影的效果相对于单边阴影距离减半，所以要设得更大
div{
width:250px;
height:250px;
background:greenyellow;
box-shadow:black 0px 0px 10px;//将颜色提到前面，且将h-shadow,v-shadow设为0px,实现四周阴影
}123456
【参考】
转载请保留原文链接： https://zodream.cn/blog/id/23.html