```
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>login</title>
<style>
* {
padding: 0;
margin: 0;
}
#bg-pho {
background-image: url("wallhaven-6k2ogx.jpg");
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -10;
background-size: cover;
}
.box {
position: absolute;
top: 25%;
left: 33%;
height: 17em;
width: 27em;
background-color: hsla(17, 34%, 31%, 0.8);
box-shadow: 10px 10px 15px#141216;
border-radius: 2em;
}
.loginText {
text-align: center;
margin-top: 1em;
margin-bottom: 0.1em;
font-size: 1.5em;
font-weight: 600;
font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", "serif";
}
.inputBox,
.submitBox {
float: left;
outline: none;
/*清除input被点中后出现外边框*/
height: 2.3em;
width: 15em;
text-align: center;
border: 0.2em solid #53868B;
border-radius: 1em;
margin-left: 8.5em;
margin-top: 1.5em;
}
.submitBox:hover {
background-image: linear-gradient(-225deg, #231557 0%, #44107A 29%, #FF1361 67%, #FFF800 100%);
}
</style>
</head>
<body>
<div class="box">
<form action="#">
<p class="loginText">Welcome</p>
<input class="inputBox" type="text" name="userName" placeholder="Username">
<input class="inputBox" type="password" name="userPassword" placeholder="Password">
<input class="submitBox" type="submit" name="submit" value="login">
</form>
</div>
<div id="bg-pho"></div>
</body>
</html>
```
