盒外的陰影與白色的影子

問題創建一個頁面：主箱陰影不來的圖像。

我嘗試過使用自己的HTMl和CSS代碼。這裏是小提琴 http://jsfiddle.net/EE6hU/

HTML

<div class='wrapper' id='id_wrapper'> 
     <div class='main'> <span class='online_survey'>Online Survey</span> 

      <div class='login_box'> 
       <div class='login'> 
        <form> 
         <div class='label'>username</div> 
         <input type='text' name='username' class='loginInput' placeholder='moderator' /> 
         <div style='clear:both'></div> 
         <div class='label'>password</div> 
         <input type='password' name='password' class='loginInput' placeholder='*********' /> 
         <div style="clear:both"></div> 
         <input type='checkbox' name='remember' class='check' /> 
         <div class='remember'>Remember me</div> 
         <input type='submit' name='submit' class='submit_button' value='submit' /> 
        </form> 
       </div> 
       <div class='forget_pass'><a href='#'>Forget Password</a> 

       </div> 
      </div> 
     </div> 
    </div>

CSS

.wrapper { 
    background:#313131; 
    height:645px; 
} 

.main { 

    margin: 0 auto; 

    position: relative; 

    top: 20%; 

    width: 500px; 

} 

.online_survey { 

    bottom: 10px; 

    color: #FFFFFF; 

    font-size: 20px; 

    margin-left: 15px; 

    position: relative; 

} 

.user_name { 

} 

.login_box { 

    background: none repeat scroll 0 0 #7D7D7D; 

    border: 1px solid #98B2C9; 

    border-radius: 20px; 

    padding: 8px; 

    box-shadow: 0px 0px 10px 4px rgba(69, 68, 68, 0.75); 

    -moz-box-shadow: 0px 0px 10px 4px rgba(69, 68, 68, 0.75); 

    -webkit-box-shadow: 0px 0px 10px 4px rgba(69, 68, 68, 0.75); 

} 

.loginInput { 

    background:#313131; 

    border-radius: 5px; 

    float: left; 

    height: 30px; 

    width: 200px; 

    margin: 5px; 

    padding:5px; 

    color:#ffffff; 

} 

.label { 

    float: left; 

    height: 30px; 

    width: 140px; 

} 

.login { 

    padding: 30px; 

} 

.forget_pass a { 

    color: white; 

    text-decoration:none; 

} 

.submit_button { 

} 

.check { 

    float: left; 

    margin-left: 140px; 

    margin-right: 5px; 

}

enter image description here GE。

來源

2014-02-25 Puzzled Boy

你可能無法通過使用CSS如此大面積實現這樣一個突出的白色的影子，雖然在層堆疊許多陰影可能做的伎倆。考慮一下盒子後面的透明PNG圖像疊加。 – isherwood

此外，box-shadow的供應商前綴不再是真的必要了：http://caniuse.com/#search=box-shadow – isherwood

@isherwood：你我知道得很好。謝謝你的評論。 –

堆疊各種尺寸的陰影可能會讓你接近。

http://jsfiddle.net/isherwood/EE6hU/1

.login_box { 
    box-shadow: 0px 0px 10px 4px rgba(69, 68, 68, 0.75), 
     0 0 150px rgba(255,255,255,0.5), 
     0 0 250px rgba(255,255,255,0.5); 
}

我可能吃我自己的話。這裏有一種方式來獲得更窄的白色的影子在你的形象：

http://jsfiddle.net/isherwood/EE6hU/4

.login_box { 
    ... 
    box-shadow: 0px 0px 10px 4px rgba(69, 68, 68, 0.75); 
    margin: 0 -150px; 
} 
.login_box_shadow { 
    overflow: visible; 
    border-radius: 20px; 
    box-shadow: 0 0 150px rgba(255, 255, 255, 0.5), 
     0 0 250px rgba(255, 255, 255, 0.5); 
    margin: 0 150px; 
}

來源

2014-02-25 14:16:22 isherwood

謝謝你，先生，這對我來說可能是足夠的解決方案。 –

答案更新了另一個選項。 – isherwood

盒外的陰影與白色的影子

回答

相關問題