SOURCE

<div class="shadow">
  <div class="lay_box">
    <div class="title">请输入卡面值 <a href="">&#10005</a></div>
    <div class="card_form"><input type="text" placeholder="请输入最低2元的面值" /><button>确 定</button></div>
  </div>
</div>

.shadow{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.6);
  transition:0.3s;
}
.lay_box{
  position:absolute;
  left:50%;
  top:50%;
  margin-left:-200px;
  margin-top:-200px;
  width:400px;
  background:#fff;
  border-radius:4px;
  box-shadow:0 0 40px rgba(0,0,0,0.2);
  overflow:hidden;
}
.title{
  position:relative;
  height:50px;
  line-height:50px;
  padding:0 15px;
  background:#eee;
  color:#333;
  font-size:16px;
}
.title>a{
  position:absolute;
  right:15px;
  text-decoration:none;
  color:#333;
}
.card_form{
  padding:30px;
}
.card_form>input{
  height:40px;
  width:316px;
  margin-bottom:30px;
  padding:0 10px;
  font-size:14px;
  color:#333;
}
.card_form>button{
  width:100%;
  height:42px;
  background:#516fff;
  color:#fff;
  font-size:16px;
  border:none;
  border-radius:4px;
  cursor:pointer;
}