html - 框外阴影与白色阴影相结合

Question

我想创建一个如图所示的页面

问题:主框阴影不像图像中那样出现。

我尝试过使用自己的 HTMl 和 CSS 代码。这是 fiddle http://jsfiddle.net/EE6hU/

HTML

 <div class='wrapper' id='id_wrapper'>
        <div class='main'>  <span class='online_survey'>Online Survey</span>

            <div class='login_box'>
                <div class='login'>
                    <form>
                        <div class='label'>username</div>
                        <input type='text' name='username' class='loginInput' placeholder='moderator' />
                        <div style='clear:both'></div>
                        <div class='label'>password</div>
                        <input type='password' name='password' class='loginInput' placeholder='*********' />
                        <div style="clear:both"></div>
                        <input type='checkbox' name='remember' class='check' />
                        <div class='remember'>Remember me</div>
                        <input type='submit' name='submit' class='submit_button' value='submit' />
                    </form>
                </div>
                <div class='forget_pass'><a href='#'>Forget Password</a>

                </div>
            </div>
        </div>
    </div>

CSS

.wrapper {
    background:#313131;
    height:645px;
}

.main {

    margin: 0 auto;

    position: relative;

    top: 20%;

    width: 500px;

}

.online_survey {

    bottom: 10px;

    color: #FFFFFF;

    font-size: 20px;

    margin-left: 15px;

    position: relative;

}

.user_name {

}

.login_box {

    background: none repeat scroll 0 0 #7D7D7D;

    border: 1px solid #98B2C9;

    border-radius: 20px;

    padding: 8px;

    box-shadow: 0px 0px 10px 4px rgba(69, 68, 68, 0.75);

    -moz-box-shadow: 0px 0px 10px 4px rgba(69, 68, 68, 0.75);

    -webkit-box-shadow: 0px 0px 10px 4px rgba(69, 68, 68, 0.75);

}

.loginInput {

    background:#313131;

    border-radius: 5px;

    float: left;

    height: 30px;

    width: 200px;

    margin: 5px;

    padding:5px;

    color:#ffffff;

}

.label {

    float: left;

    height: 30px;

    width: 140px;

}

.login {

    padding: 30px;

}

.forget_pass a {

    color: white;

    text-decoration:none;

}

.submit_button {

}

.check {

    float: left;

    margin-left: 140px;

    margin-right: 5px;

}

格。

Answer 1

堆叠各种大小的阴影可能会让您接近。

http://jsfiddle.net/isherwood/EE6hU/1

.login_box {
    box-shadow: 0px 0px 10px 4px rgba(69, 68, 68, 0.75), 
        0 0 150px rgba(255,255,255,0.5),
        0 0 250px rgba(255,255,255,0.5);
}

我可能不得不食言。这是在图像中获得较窄白色阴影的方法:

http://jsfiddle.net/isherwood/EE6hU/4

.login_box {
    ...
    box-shadow: 0px 0px 10px 4px rgba(69, 68, 68, 0.75);
    margin: 0 -150px;
}
.login_box_shadow {
    overflow: visible;
    border-radius: 20px;
    box-shadow: 0 0 150px rgba(255, 255, 255, 0.5), 
        0 0 250px rgba(255, 255, 255, 0.5);
    margin: 0 150px;
}