input的边框圆角阴影

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>响应式登录</title>
        <link rel="stylesheet" type="text/css" href="css/style.css"/>
    </head>
    <body>
        <div id="wrapper">
            <header><img src="img/1a.png"/></header>
            <article class="count">
                <form>
                    <input type="text" placeholder="请输入账号"/>
                    <input type="pasword" placeholder="请输入密码"/>
                    <input type="submit" value="登录"/>
                </form>
                <div>
                    <span>
                        <input type="checkbox"/> 记住密码
                    </span>
                    <span>忘记密码</span>
                </div>
            </article>
            <footer>
                <ul>
                    <li><a href="#"><img src="img/2.png"/></a></li>
                    <li><a href="#"><img src="img/3.png"/></a></li>
                    <li><a href="#"><img src="img/4.png"/></a></li>
                </ul>
            </footer>
        </div>
    </body>
</html>

*{
    padding:0;
    margin:0;
    list-style:none;
}
body,html{
    background:#4876ef;
}
#wrapper{
    width:400px;
    height:500px;
    background:#fff;
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    margin:auto;
    overflow:hidden;
}
header{
    width:100%;
    height:91px;
    display:-webkit-box;
    -webkit-box-pack:center;
    /* border:1px solid red; */
}
header>img{
    position:relative;
    top:-30px;
}
.count{
    width:100%;
    /* border:1px solid red; */
    margin-top:10px;
}
.count>form{
    width:90%;
    /* border:1px solid green; */
    margin:0 auto;
    display:-webkit-box;
    -webkit-box-orient: vertical;
}
.count>form>input{
    display:block;
    padding:13px;
    /* border:0px; */
    /* box-shadow:0 0 1px #999999; */
}
.count>form>input:nth-child(1){
    border-radius:3px 3px 0 0 ;
}
.count>form>input:nth-child(2){
    border-radius:0 0 3px 3px;
}
.count>form>input:nth-child(3){
    margin-top:20px;
    background:#4876EF;
    border-radius:3px;
    color:#fff;
}
.count>div{
    width:90%;
    /* border:1px solid green; */
    margin:10px auto;
    display:-webkit-box;
    -webkit-box-pack:justify;
}
.count>div>span{
    display:block;
    color:#666;
}
footer{
    width:100%;
}
footer>ul{
    width:100%;
    display:-webkit-box;
    -webkit-box-pack:center;
}
footer>ul>li{
    display:-webkit-box;
}
footer>ul>li>a{
    display:block;
}
footer>ul>li>a>img{
    display:block;
    width:60%;
    margin:0 auto;
}
@media screen and (max-width:420px){
    #wrapper{
        width:100%;
        height:100%;
        background:#4876EF;
    }
    header{
        overflow:hidden;
    }
    header>img{
        top:30px;
    }
    .count>form>input:nth-child(3){
        background:#0000ff;
    }
    .count>div>span{
        color:#fff;
    }
}

光aaaaand影 2019-06-27

源自：响应式布局 3-4 响应式布局实战(四)