Shadow Daquan

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
    </head>
    <style>
        .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: 10px -4px -5px -5px # 00FF00, -5px 5px 10px - 4px # 00FF00; 
        } 
        .no - Top {
             / * .left-bottom right-bottom combination ,, * / 
            Box -shadow: -5px 5px -4px # 00ff00,5px 5px 10px 10px - 4px # 00FF00; 
        }
     </ style> 
    <body> 
    <div class = "shadow"> 
        <div class = "left"> left shaded </ div> 
        <div class = "bottom "> bottom shadow </ div> 
        <div class =" right "> right portion shaded </ div> 
        <div class =" top "> top portion shaded </ div> 
        <div class =" left-top "> top left hatched </ div> 
        <div class = "right-Top"> upper right shaded </ div>
        <div class = "left-bottom "> lower left hatched </ div> 
        <div class = "bottom-right"> bottom right hatched </ div>
        <div class = "no-left "> no left shaded </ div> 
        <div class = "NO-bottom"> no shadow </ div> 
        <div class = "NO-right"> without the right shaded </ div > 
        <div class = "NO-Top"> Supreme shadow </ div>         
    </ div> 
    </ body> 
</ HTML>
Guess you like
