实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>登录</title>
<style type="text/css">
*{margin: 0;padding: 0;}
p{margin:0;padding:0;}
body{
background: #151515
}
div{
width:400px;
height:450px;
margin:200px auto;
background: rgba(188,185,198,0.4);
border-radius: 10px;
text-align: center;
}
img{
width: 80px;
border-radius: 50%;
margin-top: 50px;
}
input{
width: 300px;
height:40px;
margin-top:15px;
border-radius: 6px;
border:none; /*去掉元素自带边框*/
padding-left: 15px;
}
button{
border:none;
width:315px;
height:40px;
border-radius: 6px;
background:#D84C29;
color: #fff;
margin-top:30px;
font-size: 16px;
text-align:center;
letter-spacing:10px;
}
</style>
</head>
<body>
<div>
<img src="http://erp.voopuse.com/uploads/images/af/e1e2d0421583a5847edd4a0b311b4a23054eaa.jpg">
<form action="" method="">
<input type="text" name="" placeholder="请输入用户名"><br>
<input type="password" name="" placeholder="请输入密码"><br>
<button>登录</button>
</form>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
background(背景图 背景色) 背景色(英文单词 16进制颜色 RGB颜色)
background-position:url(图片地址)
背景色透明度
background: rgba(129,44,44,0.2);
background:linear-gradient(方向，其实颜色，终止颜色)
边框
样式：dotted 点线 dashed 虚线 solid 实线 double 2个边框