Html 长方体外部阴影与白色阴影组合

我想创建一个类似于图片的页面

问题: 主框阴影与图像中的阴影不同

我已经尝试使用我自己的HTMl和CSS代码。 这是小提琴

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>

---

ge。

堆叠各种大小的阴影可能会让你靠近

我可能不得不收回我自己的话。以下是一种在图像中获得更窄白色阴影的方法：

---

您可能无法使用CSS在如此大的区域上实现如此突出的白色阴影，尽管将许多阴影堆叠在层中可能会达到这一效果。考虑一个透明的PNG图像叠加在盒子后面。另外，盒子阴影的供应商前缀不再需要了：“伊舍伍德：YA，我非常了解。谢谢你的评论。

.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;

}

.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);
}

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