body{
background: url('../img/1.png')no-repeat center center fixed;
background-size: cover;
padding: 20px;
}
form{
width: 343px;
height: 500px;
margin: 0 auto;
padding: 30px;
border: 1px solid rgba(0,0,0,0.2); /*CSS 属性 border-radius 允许你设置元素的外边框圆角。*/
border-radius: 5px;
background-color: rgba(0,0,0,0.5);
box-shadow: 0 0 13px 3px rgba(0,0,0,0.5);
overflow: hidden;
}
.border-radius{
width: 200px;
height: 200px;
border-radius: 200px ;
background: url(../img/1.png)no-repeat center center;
margin: 40px auto;
border: 5px solid rgba(255,255,255,.4);
}
input{
width: 276px;
height: 48px;
border: 1px solid rgba(255,255,255,.4);
border-radius: 4px;
font-family: 'Source sans pro',sans-serif;
display: block;/*每一个元素都有默认的display属性值，比如div元素，它的默认display属性值为“block”，成为“块级”元素(block-level)；而span元素的默认display属性值为“inline”，称为“行内”元素。定义display：block属性后，定义width、height等和长宽相关的css属性才会生效。*/
font-size:18px ;
color: #fff;
padding-left:45px ;
padding-right:20px ;
padding-bottom: 20px;
background: rgba(255,255,255,.4)no-repeat 16px 16px;
}
input[type=submit]{
cursor: pointer;
}
input::-webkit-input-placehorder{
color: #fff;
}
.btn{
width: 138px;
height: 44px;
border-radius: 4px;
margin: 0 auto;
background: #00b0dc;
padding: 10.5px 21px;
color: #e1e1e1;
}
.btn:hover{
border: 1px solid #253727;
box-shadow: 0 1px 0 #333333;
background: #00b0dc;
color: #FFFFFF;
}
input:focus{
background-color: rgba(0,0,0,0.2);
box-shadow: 0 0 5px 1px rgba(255,255,255,0.5);
overflow: hidden;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>login</title>
<link type="text/css" rel="stylesheet" href="css/login.css" media="screen"/>
</head>
<body>
<form>
<div class="border-radius">
</div>
<input type="text" name="name" placeholder="name"/>
<input type="password" name="passord" placeholder="password"/>
<input type="submit" name="submit" value="login" class="btn"/>
</form>
</body>
</html>
