圆角带阴影的HTML5 Facebook登录表单

2024-09-05 12:18:51

字体：大中小

来源：转载

供稿：网友

HTML5实现 Facebook登录表单，圆角登录框+外框阴影效果，看着漂亮极了，有FaceBook帐号的朋友或许会对Facebook的登录框记忆犹新，今天这款仿写的效果，也是相当不错的，有兴趣的运行一下看效果。再此提示，请不要使用IE8，推荐Chrome浏览器。

<!DOCTYPE html> <html lang="en"> <head>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">  <title>HTML5 Facebook登录表单</title>  <style>body{font: 12px/20px 'Lucida Grande', Verdana, sans-serif; color: #404040; background: #ebc9a2;}input, textarea, select, label{font-family: inherit; font-size: 12px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}.login{margin: 20px auto; padding: 18px 20px; width: 200px; background: #3f65b7; background-clip: padding-box; border: 1px solid #172b4e; border-bottom-color: #142647; border-radius: 5px; background-image: -webkit-radial-gradient(cover, #437dd6, #3960a6); background-image: -moz-radial-gradient(cover, #437dd6, #3960a6); background-image: -o-radial-gradient(cover, #437dd6, #3960a6); background-image: radial-gradient(cover, #437dd6, #3960a6); -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), inset 0 0 1px 1px rgba(255, 255, 255, 0.1), 0 2px 10px rgba(0, 0, 0, 0.5); box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), inset 0 0 1px 1px rgba(255, 255, 255, 0.1), 0 2px 10px rgba(0, 0, 0, 0.5);}.login > h1{margin-bottom: 20px; font-size: 16px; font-weight: bold; color: white; text-align: center; text-shadow: 0 -1px rgba(0, 0, 0, 0.4);}.login-input{display: block; width: 100%; height: 37px; margin-bottom: 20px; padding: 0 9px; color: white; text-shadow: 0 1px black; background: #2b3e5d; border: 1px solid #15243b; border-top-color: #0d1827; border-radius: 4px; background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0)); background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0)); background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0)); background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0)); -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.2); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.2);}.login-input:focus{outline: 0; background-color: #32486d; -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 0 4px 1px rgba(255, 255, 255, 0.6); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 0 4px 1px rgba(255, 255, 255, 0.6);}.lt-ie9 .login-input{line-height: 35px;}.login-submit{display: block; width: 100%; height: 37px; margin-bottom: 15px; font-size: 14px; font-weight: bold; color: #294779; text-align: center; text-shadow: 0 1px rgba(255, 255, 255, 0.3); background: #adcbfa; background-clip: padding-box; border: 1px solid #284473; border-bottom-color: #223b66; border-radius: 4px; cursor: pointer; background-image: -webkit-linear-gradient(top, #d0e1fe, #96b8ed); background-image: -moz-linear-gradient(top, #d0e1fe, #96b8ed); background-image: -o-linear-gradient(top, #d0e1fe, #96b8ed); background-image: linear-gradient(to bottom, #d0e1fe, #96b8ed); -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), inset 0 0 7px rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.15); box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), inset 0 0 7px rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.15);}.login-submit:active{background: #a4c2f3; -webkit-box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.4), 0 1px rgba(255, 255, 255, 0.1); box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.4), 0 1px rgba(255, 255, 255, 0.1);}.login-help{text-align: center;}.login-help > a{font-size: 11px; color: #d4deef; text-decoration: none; text-shadow: 0 -1px rgba(0, 0, 0, 0.4);}.login-help > a:hover{text-decoration: underline;}::-moz-focus-inner{padding: 0; border: 0;}:-moz-placeholder{color: #bcc0c8 !important;}::-webkit-input-placeholder{color: #bcc0c8;}:-ms-input-placeholder{color: #bcc0c8 !important;}  </style>  </head><body>  <form class="login" onsubmit="return false">    <h1>Facebook</h1>    <input type="email" name="email" class="login-input" placeholder="Email Address" autofocus>    <input type="password" name="password" class="login-input" placeholder="Password">    <input type="submit" value="Login" class="login-submit">    <p class="login-help">Forgot password?</p>  </form> <div style="text-align:center;clear:both"></div></body></html>

上一篇：CSS3 HTML5网页动画时钟特效

下一篇：HTML5叠纸样式的登录框