css：box-shadow实现单边，多边阴影

• 文档：https://developer.mozilla.org/zh-CN/docs/Web/CSS/box-shadow
• 可视化工具 Box-shadow_generator

语法

box-shadow: X轴偏移量 Y轴偏移量 模糊半径 扩散半径 颜色

示例：

    
        
    
    
        .shadow div{
            float:left;
            margin:50px 120px;
            width:100px;
            height:100px;
            border:2px solid orange;
            text-align:center;
            line-height:100px;
         }
        .left{
            box-shadow:-5px 0 10px -5px #00ff00;
        }
        .bottom{
            box-shadow:0 5px 10px -5px #00ff00;
        }
        .right{
            box-shadow:5px 0 10px -5px #00ff00;
        }
        .top{
            box-shadow:0px -5px 10px -5px #00ff00;
        }
        .left-top{
            box-shadow:-5px -5px 10px  -4px #00ff00;            
        }        
        .right-top{
            box-shadow:5px -5px 10px -4px #00ff00;
        }
        .left-bottom{
            box-shadow:-5px 5px 10px -4px #00ff00;
        }
        .right-bottom{
            box-shadow:5px 5px 10px -4px #00ff00;
        }
        .no-left{
            /* .right-bottom,.right-top组合 */
            box-shadow:5px 5px 10px -4px #00ff00,5px -5px 10px -4px  #00ff00;
        }
        .no-bottom{
            /* .left-top,.right-top组合 */
            box-shadow:-5px -5px 10px  -4px #00ff00,5px -5px 10px -4px  #00ff00;
        }
        .no-right{
            /* .left-top，.left-bottom组合 */
            box-shadow:-5px -5px 10px  -4px #00ff00,-5px 5px 10px -4px #00ff00;
        }
        .no-top{
            /* .left-bottom,,right-bottom组合 */
            box-shadow:-5px 5px 10px -4px #00ff00,5px 5px 10px -4px #00ff00;
        }
    
    
    
        左边阴影
        底部阴影
        右部阴影
        顶部部阴影
        左上阴影
        右上阴影
        左下阴影
        右下阴影
        无左阴影
        无下阴影
        无右阴影
        无上阴影        
    
    

示例来源：box-shadow制作各种单边，多边阴影