<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style>
body{
background-color: -moz-linear-gradient( top,#ccc,#000);
}
#login{
box-shadow:
0 0 2px rgba(0,0,0,0.2),
0 1px 1px rgba(0,0,0,.2),
0 3px 0 #fff,
0 4px 0 rgba(0,0,0,.2);
position:absolute;
z-index: 0;
/*
-moz-box-shadow:5px 5px 5px #d0d0d0 inset;
-webkit-box-shadow:5px 5px 5px #d0d0d0 inset;
box-shadow:5px 5px 5px #d0d0d0 inset; */
}
#login:before{
content:'';
position:absolute;
z-index:-1;
border :1px dashed #ccc;
top :5px;bottom:5px;left:5px;right:5px;
box-shadow: 0 0 0 1px #fff;
}
h3{
text-shadow: 0 1px 0 rgba(255,25,55,.9);
text-transform:uppercase;
text-align:center;
color:#d0d0d0;
margin:0 0 30px 0;/*ma外pa内*/
letter-spacing:4px;
position:relative;
}
h3:after, h3:before{
background-color:#777;
content:"";
height:1px;
position:absolute;
top:15px;width:120px;
}
h3:after{
background-image:-webkit-gradient(linear,left top ,right top,from(#777),to(#fff) );
background-image:-webkit-linear-gradient(left,#777,#fff);
background-image:linear-gradient(left,#777,#fff);
right:0;
}
h3:before{
background-image:-webkit-gradient(linear,right top,left top,from(#777),to(#777));
background-image:-webkit-linear-gradient(right,#777,#fff);
background-image:linear-gradient(right,#777,#fff);
left:0;
}
#login{
background:linear-gradient(top,#ccc,#000);
}
</style>
</head>
<body style="text-align:center">
<form method="post" action="" id="login" style=" margin:150px 380px">
<h3>Login<h3>
<fieldset id="inputs" align="center" >
<br/>
<input id="un" type="text" placeholder="UserName"autofocus required/>
<br/>
<input id="pw" type="password" placeholder="PassWord" autofocus required />
</fieldset>
<input type="submit" id="submit" value="login in"/>
</form>
</body>
</html>
简单h5+css3登录界面
最新推荐文章于 2024-08-16 15:34:57 发布