無法使用CSS設計div div

Question

我無法弄清楚爲什麼我的div風格不適用。這一定是非常簡單明顯的事情，但對我來說，不是今天。

這是一個非常簡單的登錄頁面。

HTML：

<div id="form_wrap"> 
    <div id="logo"> 
     <a href="#" title="#" id="logg"> 
      <img src="./images/smaple.png" alt="sample" /> 
     </a>  
    </div> 

    <form name="login-form" class="login-form" action="#" method="post">    
     <div class="form_content"> 
      <input name="username" type="text" class="input username" placeholder="Benutzername" /> 
      <input name="password" type="password" class="input password" placeholder="Passwort" />   
      <input name="submit" type="submit" class="button" value="Anmelden"/> 
     </div> 
    </form>  
</div> 

<div id="langchoice"> 
    <span id="triangle"></span> 

    <select id ="langlist"> 
     <option value= "1">Deutsch</option> 
     <option value = "2">Englisch</option> 
    </select> 
</div> 

而CSS（一些小的背景漸變更改，以避免此代碼意大利麪條）：

*{ 
margin:0; 
padding:0; 
border: none; 
outline: none; 

    } 



/* apply a natural box layout model to all elements */ 
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } 





    html{ 

background:#193358 url('images/bckg.jpg') repeat; 

/* Ensure the html element always takes up the full height of the browser window */ 
min-height:100%; 
height: 100%; 
} 



    body{ 
/* Workaround for some mobile browsers */ 

height: 100%; 
min-height:100%; 
    background: #333; 


    } 


    a, a:visited { 
outline:none; 
color:#1c4f64; 
    } 

    a:hover{ 
text-decoration:none; 
    } 

    section, footer, header{ 
display: block; 
    } 



    #logo { 

    text-align: center; 
    } 





    #form_wrap { 
/* Center wrapper perfectly */ 
width: 440px; 
height:400px; 
margin: 275px auto; 
z-index:2; 
clear:both; 
    } 


    header{ 

    background: #333; 
    background-repeat: repeat-x; 
    width: 100%; 
    height:300px; 
color: white; 
z-index: -1; 
position:fixed; 
top: 0; 
left: 0; 
    } 



    .login-form { 
width: 435px; 
height: 320px; 
margin: 20px auto 0; 
padding: 50px 110px 60px; 
position: relative; 

background: #f2f3e7; 
border: 0.5px solid rgba(0, 0, 0, 0.4); 
border-radius: 12px; 



box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6) inset; 
-moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6) inset; 
-webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6) inset; 
    } 



    /* Input field */ 
    .login-form .form_content .input { 
width: 188px; 
padding: 12px 25px 8px; 
font-family: 'superficial_book'; 
font-weight: 400; 
font-size: 14px; 
color: #9d9e9e; 
text-shadow: 1px 1px 0 rgba(256,256,256,1.0); 

background: #dfdfde; 
border: 1px solid #fff; 
border-radius: 10px; 

box-shadow: inset 0 1px 3px rgba(0,0,0,0.50); 
-moz-box-shadow: inset 0 1px 3px rgba(0,0,0,0.50); 
-webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,0.50); 
    } 

    /* Second input field */ 
    .login-form .form_content .password, .login-form .form_content { 
margin-top: 25px; 
    } 

    .login-form .form_content .input:hover { 
background: #d3e3e4; 
color: #416e75; 
    } 

    .login-form .form_content .input:focus { 
background: #d3e3e4; 
color: #416e75; 

box-shadow: inset 0 1px 2px rgba(0,0,0,0.25); 
-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.25); 
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.25); 
    } 



    /* Animation */ 
    .input, .button, .langchoice { 
transition: all 0.5s ease; 
-moz-transition: all 0.5s ease; 
-webkit-transition: all 0.5s ease; 
-o-transition: all 0.5s ease; 
-ms-transition: all 0.5s ease; 
    } 



    /* Login button */ 
    .login-form .button { 

    position: relative; 
padding: 8px 60px; 
margin: 25px auto; 
font-family: 'superficialbold'; 
font-weight: 300; 
font-size: 14px; 
color: #e3e3d5; 
display: inline-block; 
text-align: center; 
text-shadow:1px -1.5px rgba(0, 0, 0, 0.5), 0 0px rgba(57, 128, 148, 0.5), 0 0 rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.3); 
text-decoration: none; 
background:#156785 url('images/button_bckg.gif') repeat-x ; 
border-radius: 10px; 
cursor: pointer; 
box-shadow: 0 1px 2px #fff inset, 0 2px 0 0 #156785, 0 5px 3px #999; 
-moz-box-shadow: 0 1px 2px #fff inset, 0 2px 0 0 #156785, 0 5px 3px #999; 
-webkit-box-shadow: inset 0px 1px 0px #333, 0px 2px 0px 0px #156785, 0px 5px 3px #999; 
    } 

    .login-form .button:hover, .login-form .button:focus,.login-form .button:active { 
border: 1px solid rgba(256,256,256,0.3); 
box-shadow: 0 1px 0 #333 inset,0 1px 0 #333; 
-moz-box-shadow: inset 0px 1px 0px #333; 
-webkit-box-shadow: inset 0px 1px 0px #333; 
color: #f6f4e7; 
padding: 7px 60px; 
position: relative; 
top:-1px; 
text-shadow:1px -1.5px rgba(0, 0, 0, 0.5), 0 0px rgba(57, 128, 148, 0.5), 0 0 rgba(255, 255, 255, 0.2), 0 1px rgba(0, 0, 0, 0.3); 
    } 

    div#langchoice { 

    position: absolute; 
    top: 200px; 
    left: 200px; 
    width:140px; 
    height:34px; 
    background-color:#F1BD4B; 
    margin-left: -8px; 
    padding:2px 10px; 
    -webkit-border-radius: 1px 8px 8px 1px; 
    border-radius: 1px 8px 8px 1px; 
border:0; 
    -webkit-box-shadow: 1px 2px 2px 0px rgba(23, 34, 23;) 
    box-shadow: 1px 2px 2px 0px rgba(23, 34, 23;) 

    z-index: 10; 

    } 

Friddle這裏：http://jsfiddle.net/yp5yw/

Answer 1

CSS3樣式不支持較低版本的瀏覽器。請參考鏈接http://caniuse.com/

Answer 2

訛誤

-webkit-box-shadow: 1px 2px 2px 0px rgba(23, 34, 23;) 
box-shadow: 1px 2px 2px 0px rgba(23, 34, 23;) 
             ^the semicolon AND the alpha value. 

正確：

div#langchoice { 
    position: absolute; 
    top: 200px; 
    left: 200px; 
    width:140px; 
    height:34px; 
    background-color: #F1BD4B; 
    margin-left: -8px; 
    padding:2px 10px; 
    -webkit-border-radius: 1px 8px 8px 1px; 
    border-radius: 1px 8px 8px 1px; 
    border:0; 
    -webkit-box-shadow: 1px 2px 2px 0px rgba(23, 34, 23, 1); 
    box-shadow: 1px 2px 2px 0px rgba(23, 34, 23, 1); 
    -moz-box-shadow: 1px 2px 2px 0px rgba(23, 34, 23, 1); 
    z-index: 10; 
}