盒子阴影效果

Question

我正在尝试将阴影应用于div，但是我无法达到预期的效果。效果要低于元素。

示例：http://www.paulund.co.uk/creating-different-css3-box-shadows-effects

JSFiddle：http://jsfiddle.net/Ck7pG/

CSS

ul#nav li {
    display: inline;
    line-height: 40px;
}

 /* Shadow effect */
.shadow-effect {
    position: relative;
    -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}

.shadow-effect:before, .shadow-effect:after {
    content: "";
    position: absolute;
    z-index: -1;
    -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.8);
    -moz-box-shadow: 0 0 10px rgba(0,0,0,0.8);
    box-shadow: 0 0 10px rgba(0,0,0,0.8);
    top: 20%;
    bottom: 0;
    left: 50px;
    right: 50px;
    -moz-border-radius: 100px / 10px;
    border-radius: 100px / 10px;
}

Answer 1

我刚刚从您提供的网站上提出了您的要求，我认为这就是您所需要的

DEMO

.shadow-effect {
    position:relative;       
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px                 rgba(0, 0, 0, 0.1) inset;
       -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.shadow-effect:before, .shadow-effect:after {
    content:"";
    position:absolute; 
    z-index:-1;
    -webkit-box-shadow:0 0 10px rgba(0,0,0,0.8);
    -moz-box-shadow:0 0 10px rgba(0,0,0,0.8);
    box-shadow:0 0 10px rgba(0,0,0,0.8);
    top:20%;
    bottom:0;
    left:50px;
    right:50px;
    -moz-border-radius:100px / 10px;
    border-radius:100px / 10px;
}


.box h3{
    text-align:center;
    position:relative;
    top:80px;
}
.box {
    width:70%;
    height:100px;
    background:#FFF;
    margin:40px auto;
}


.effect6
{
    position:relative;       
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
       -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.effect6:before, .effect6:after
{
    content:"";
    position:absolute; 
    z-index:-1;
    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
    -moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
    box-shadow:0 0 20px rgba(0,0,0,0.8);
    top:50%;
    bottom:0;
    left:10px;
    right:10px;
    -moz-border-radius:100px / 10px;
    border-radius:100px / 10px;
}