超级卡哇伊的登录框

css

      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      a {
        color: #6a6a6a;
        text-decoration: none;
      }

      body {
        background-color: #96c6e2;
      }

      .box {
        display: flex;
        width: 990px;
        height: 550px;
        margin: 100px auto;
      }

      .box .img_left {
        width: 315px;
        height: 550px;
        background: url("D:\\steam\\steamapps\\workshop\\content\\431960\\2\\preview.jpg") -152px 0 / cover;
        opacity: 0.85;
      }

      .box .login {
        width: 585px;
        height: 550px;
        background-color: #d3e6f2;
        text-align: center;
      }

      .box .login h1 {
        line-height: 5;
        color: #7092c8;
      }

      .box .login form {
        display: flex;
        width: 500px;
        flex-wrap: wrap;
        margin: 0 auto;
      }

      .box .login .user,
      .box .login .pwd {
        width: 500px;
        border: 0;
        border-bottom: 1px solid #8ba9d3;
        font-size: 16px;
        outline: none;
        background-color: #d3e6f2;
        padding: 8px;
        margin-bottom: 60px;
      }

      .box .login .button {
        width: 350px;
        height: 50px;
        border: 0;
        font-size: 14px;
        color: #fff;
        border-radius: 7px;
        background-image: linear-gradient(120deg, #83c0e1 0%, #d6dce9 100%);
        margin: 0 auto;
        transition: all 0.3s;
      }

      .box .login .button:hover {
        box-shadow: 0 0 2rem 0.5rem rgba(0, 0, 0, 0.25);
      }

      .box .login .link {
        display: flex;
        width: 400px;
        height: 50px;
        justify-content: space-between;
        line-height: 50px;
        margin: 50px auto;
      }

html

 <div class="box">
      <div class="img_left"></div>

      <div class="login">
        <h1>登录</h1>
        <form>
          <input type="text" placeholder="用户名" class="user" />
          <input type="password" placeholder="密码" class="pwd" />
          <input type="button" value="Login" class="button" />
        </form>

        <div class="link">
          <a href="javascript:;">注册账号</a>
          <a href="javascript:;">找回密码</a>
        </div>
      </div>
    </div>