<title>Document</title> <style>

body {  /*铺满背景图*/
  display: flex;
  background: url('https://lmg.jj20.com/up/allimg/4k/s/01/210924155T04M5-0-lp.jpg') no-repeat;
  background-size: 100% ; 
  justify-content: center; /* 主轴,横轴居中*/
  align-items: center; /* 副轴 竖轴居中*/
}

#login_box {
  width: 350px;
  height: 400px;
  background-color:rgba(48, 44, 44, 0.493);/*rgba颜色模式 红绿蓝 最后是透明度1是不透明0是全透明*/
  margin: auto;
  margin-top: 10%;  /*上边的外边距*/
  text-align: center;
  border-radius: 10px; /*圆角边框弧度*/
  padding: 50px 50px; /*内边距*/

}

h2 { /*login字体变色 上边外边距调整*/
  color: #ffffff90;
  text-align: center;
}
#input_box{
    display: flex;
    flex-direction: column;  /* 把主轴从横的改成竖的*/
    justify-content: space-around; /* 均分布局空间 */
    align-items: center; 
    height: 100px;
}
input{
  border: 0; /*边框为0 对于浏览器来讲还是渲染了 但是我没去掉边框*/
  width: 60%;
  font-size: 15px;
  color: #fff;
  background: transparent; /*透明色*/
  border-bottom: 2px solid #fff; /*边框底部画个细线*/
  padding: 5px 10px;
  outline: none; /*给表单双击选择的时候的边框去除样式*/
  margin-top: 10px; /*上边的外边距*/
}

button {/*按钮设置*/
  margin-top: 50px;
  width: 250px;
  height: 30px;
  border-radius: 10px;
  border: 0;/*边框为0 对于浏览器来讲还是渲染了 但是我没去掉边框*/
  color: #fff;
  text-align: center;
  line-height: 30px;
  font-size: 15px;
  background-color: darkcyan;
}

</style>

LOGIN

登     录