纯CSS3实现紫色登录表单.zip_css数字加减页面资源-CSDN文库

共2个文件

jpg：1个

html：1个

版权申诉

html5

jQuery

javascript

138 浏览量 2022-11-25 10:22:21 上传评论收藏 14KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

纯CSS3实现紫色登录表单.zip （2个子文件）

纯CSS3实现紫色登录表单

jiaoben1234

index.html 3KB

纯CSS3实现紫色登录表单.jpg 16KB

<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <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); } input.submit:active { background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#781bb9), to(#963AD6)); background: -moz-linear-gradient(19% 75% 90deg,#963AD6, #781bb9); } input:hover { -webkit-box-shadow: 0px 0px 4px #000; background: #9d39e1; } </style> </head> <body> <form action=""> <label>Username:</label> <input type="text" name="username" /> <label>Password:</label> <input type="password" name="password" /> <input type="submit" value="Submit" name="submit" class="submit" /> </form> <div style="text-align:center;clear:both"> <p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. </p><br> <p>来源：<a href="http://www.moobnn.com/" target="_blank">网页模板</a></p> </div> </body> </html>

评论收藏

内容反馈

版权申诉