Question

我正在尝试在图像中实现类似的盒子阴影。我尝试了不同的解决方案，但阴影一直出现在整个盒子上，而不仅仅是在中间。

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>

CSS

#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;
}

Answer 1

这样做的一个非常简单的方法是使用伪元素并在其上添加阴影。然后将absolute ly relative置于主div的左侧和右侧，使用较低的z-index。添加border-radius以获得额外的径向效果。

例如：

#login {
    position: relative;
    width: 200px; height: 200px; margin: 32px;
    background: rgb(247, 247, 247);
    border: 1px solid rgba(147, 184, 189, 0.8);
}
#login::before, #login::after { 
    content: ''; position: absolute; z-index: -1;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.5); border-radius: 50%;
}
#login::before { top: 15%; left: 0; width: 10%; height: 70%; }
#login::after { top: 15%; right: 0; width: 10%; height: 70%; }

<div id="login"></div>

测试小提琴：http://jsfiddle.net/abhitalks/12k08ksj/1/

盒子阴影只在中间（左 - 右）水平

1 个答案: