CSS3设计一个简洁的用户登录界面,可作为网站后台、用户中心的登录模板来使用,运用了CSS3技术,默认支持PC端、移动设备、PAD等设备,谈不上漂亮,不过挺简洁,而且修饰为圆滑风格,还带阴影的立体感,这种风格若使用传统的CSS技术,需要借助图片来实现,而在CSS3中,实现这些样式都挺方便的。
<!DOCTYPE html> <head> <title>CSS3登录界面 </title> <style type="text/css"> * { margin: 0px; padding: 0px;outline: none; } body { background: #4E0085; } form { border: 1px solid #270644; width: 250px; -moz-border-radius: 20px; -webkit-border-radius: 20px; background: -moz-linear-gradient(19% 75% 90deg,#4E0085, #963AD6); background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#963AD6), to(#4E0085)); margin:50px auto; padding: 20px; -moz-box-shadow:0px -5px 300px #270644; -webkit-box-shadow:0px -5px 300px #270644; } label { font-size: 12px; font-family: arial, sans-serif; list-style-type: none; color: #fff; text-shadow: #000 1px 1px; margin-bottom: 10px; font-weight: bold; letter-spacing: 1px; text-transform: uppercase; display: block; } input { -webkit-transition-property: -webkit-box-shadow, background; -webkit-transition-duration: 0.25s; padding: 6px; border-bottom: 0px; border-left: 0px; border-right: 0px; border-top: 1px solid #ad64e0; -moz-box-shadow: 0px 0px 2px #000; -webkit-box-shadow: 0px 0px 2px #000; margin-bottom: 10px; background: #8a33c6; width: 230px; } input.submit { -webkit-transition-property: -webkit-box-shadow, background; -webkit-transition-duration: 0.25s; width: 100px; background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#963AD6), to(#781bb9)); background: -moz-linear-gradient(19% 75% 90deg,#781bb9, #963AD6); color: #fff; text-transform: uppercase; text-shadow: #000 1px 1px; border-top: 1px solid #ad64e0; margin-top: 10px; } input.submit:hover { -webkit-box-shadow: 0px 0px 2px #000; background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#963AD6), to(#781bb9)); background: -moz-linear-gradient(19% 75% 90deg,#781bb9, #963AD6); } </style> </head> <body> <form action=""> <label>用户名:</label> <input type="text" name="username" /> <label>密 码:</label> <input type="password" name="password" /> <input type="submit" value="登录" name="submit" class="submit" /> </form> </body> </html>
光明若可比2018-06-11 15:52:38
<pre class="brush:php;toolbar:false"><br/></pre><p><!DOCTYPE html></p><p><head></p><p><title>CSS3登录界面 </title></p><p><style type="text/css"></p><p>* {</p><p> margin: 0px;</p><p> padding: 0px;outline: none;</p><p>}</p><p>body {</p><p> background: #4E0085;</p><p>}</p><p>form {</p><p> border: 1px solid #270644;</p><p> width: 250px;</p><p> -moz-border-radius: 20px;</p><p> -webkit-border-radius: 20px;</p><p> background: -moz-linear-gradient(19% 75% 90deg,#4E0085, #963AD6);</p><p> background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#963AD6), to(#4E0085));</p><p> margin:50px auto;</p><p> padding: 20px;</p><p> -moz-box-shadow:0px -5px 300px #270644;</p><p> -webkit-box-shadow:0px -5px 300px #270644;</p><p>}</p><p>label {</p><p> font-size: 12px;</p><p> font-family: arial, sans-serif;</p><p> list-style-type: none;</p><p> color: #fff;</p><p> text-shadow: #000 1px 1px;</p><p> margin-bottom: 10px;</p><p> font-weight: bold;</p><p> letter-spacing: 1px;</p><p> text-transform: uppercase;</p><p> display: block;</p><p>}</p><p>input {</p><p> -webkit-transition-property: -webkit-box-shadow, background;</p><p> -webkit-transition-duration: 0.25s;</p><p> padding: 6px;</p><p> border-bottom: 0px;</p><p> border-left: 0px;</p><p> border-right: 0px;</p><p> border-top: 1px solid #ad64e0;</p><p> -moz-box-shadow: 0px 0px 2px #000;</p><p> -webkit-box-shadow: 0px 0px 2px #000;</p><p> margin-bottom: 10px;</p><p> background: #8a33c6;</p><p> width: 230px;</p><p>}</p><p>input.submit {</p><p> -webkit-transition-property: -webkit-box-shadow, background;</p><p> -webkit-transition-duration: 0.25s;</p><p> width: 100px;</p><p> background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#963AD6), to(#781bb9));</p><p> background: -moz-linear-gradient(19% 75% 90deg,#781bb9, #963AD6);</p><p> color: #fff;</p><p> text-transform: uppercase;</p><p> text-shadow: #000 1px 1px;</p><p> border-top: 1px solid #ad64e0;</p><p> margin-top: 10px;</p><p>}</p><p>input.submit:hover {</p><p> -webkit-box-shadow: 0px 0px 2px #000;</p><p> background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#963AD6), to(#781bb9));</p><p> background: -moz-linear-gradient(19% 75% 90deg,#781bb9, #963AD6);</p><p>}</p><p></style></p><p></head></p><p><body></p><p><form action=""></p><p> <label>用户名:</label></p><p> <input type="text" name="username" /></p><p> <label>密 码:</label></p><p> <input type="password" name="password" /></p><p> <input type="submit" value="登录" name="submit" class="submit" /></p><p></form></p><p></body></p><p></html></p>