Html 框阴影仅在中间（左-右）水平方向

我正在尝试实现图像中类似的长方体阴影。我尝试过不同的解决方案，但阴影始终出现在整个盒子上，而不仅仅是在中间。p> HTML

<div id="login" class="animate form">
    <div class="login-header"><h2>Sign In to the world of <span>"I want Ride!"</span></h2></div>
    <form  action="form.php" autocomplete="on">
        <h1>Log in</h1>
        <p> 
           <label for="username" class="uname" data-icon="u" ></label>
           <input id="username" name="username" required="required" type="text" placeholder="myusername or mymail@mail.com"/>
        </p>
        <p> 
           <label for="password" class="youpasswd" data-icon="p"></label>
           <input id="password" name="password" required="required" type="password" placeholder="eg. X8df!90EO" /> 
        </p>
        <p class="forgot-pass">
           <a href="#" class="to_register">Forgot your Password?</a>
        </p>
        <p class="keeplogin"> 
           <input type="checkbox" name="loginkeeping" id="loginkeeping" value="loginkeeping" /> 
           <label for="loginkeeping">Keep me logged in</label>
        </p>
        <p class="login button"> 
           <input type="submit" value="Login" /> 
        </p>
        <p class="change_link">
           Not a member yet ?
           <a href="#" class="to_register">Sign Up Now</a>
        </p>
    </form>
    <div class="close-btn"><img src="images/close.png" /></div>
</div>

---

一种非常简单的方法是使用伪元素并在这些元素上加上阴影。然后将它们放置在主

div

左右两侧的

ly
relative
，并使用较低的
z-index
。添加
边界半径
以获得额外的径向效果

例如：


#登录{
位置：相对位置；
宽度：200px；高度：200px；边距：32px；
背景：rgb（247247247）；
边框：1px实心rgba（1471841890.8）；
}
#login:：before，#login:：after{
内容：“”；位置：绝对；z索引：-1；
长方体阴影：0.30px rgba（0,0,0,0.5）；边界半径：50%；
}
#登录：：在{顶部：15%；左侧：0；宽度：10%；高度：70%；}之前
#登录：：在{顶部：15%；右侧：0；宽度：10%；高度：70%；}之后

#login {
    width: 100%;
    margin: 0 0 35px 0;
    background: rgb(247, 247, 247);
    border: 1px solid rgba(147, 184, 189, 0.8);
    -webkit-box-shadow: 0pt 2px 5px rgba(105, 108, 109, 0.7), 0px 0px 8px 5px rgba(208, 223, 226, 0.4) inset;
    -moz-box-shadow: 0pt 2px 5px rgba(105, 108, 109, 0.7), 0px 0px 8px 5px rgba(208, 223, 226, 0.4) inset;
    box-shadow: 0pt 2px 5px rgba(105, 108, 109, 0.7), 0px 0px 8px 5px rgba(208, 223, 226, 0.4) inset;
    -webkit-box-shadow: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}