简单h5+css3登录界面

最新推荐文章于 2024-03-05 14:53:12 发布

Grit_ICPC

最新推荐文章于 2024-03-05 14:53:12 发布

阅读量1w

点赞数 3

分类专栏： HTML/CSS/JS 文章标签： css3 h5

本文链接：https://blog.csdn.net/grit_icpc/article/details/53163525

版权

HTML/CSS/JS 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<!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>

Grit_ICPC

关注

3
点赞
踩
10

收藏

觉得还不错? 一键收藏
1
评论
简单h5+css3登录界面

Document 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);
复制链接

扫一扫