jquery - CSS 框阴影不起作用

Question

.main-container 类中的最后一个属性是投影。如果我通过 Firebug 手动输入它，它会起作用，但由于某种原因，它根本无法正常工作。

HTML :

<div class="main-container"></div>

CSS:

.main-container{
    background-color:black;
    background: #c9ddf0; /* Old browsers */
    background: -moz-linear-gradient(top,  #c9ddf0 0%, #acc7e0 50%, #98bad9 51%, #6a9fd1 100%, #6a9fd1 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c9ddf0), color-stop(50%,#acc7e0), color-stop(51%,#98bad9), color-stop(100%,#6a9fd1), color-stop(100%,#6a9fd1)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #c9ddf0 0%,#acc7e0 50%,#98bad9 51%,#6a9fd1 100%,#6a9fd1 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #c9ddf0 0%,#acc7e0 50%,#98bad9 51%,#6a9fd1 100%,#6a9fd1 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #c9ddf0 0%,#acc7e0 50%,#98bad9 51%,#6a9fd1 100%,#6a9fd1 100%); /* IE10+ */
    background: linear-gradient(top,  #c9ddf0 0%,#acc7e0 50%,#98bad9 51%,#6a9fd1 100%,#6a9fd1 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c9ddf0', endColorstr='#6a9fd1',GradientType=0 ); /* IE6-9 */
    -webkit-border-radius: 9px;
    -moz-border-radius: 9px;
    border-radius: 9px; 
    border:solid 1px #879eb4;
    width:600px;
    height:600px;
    position:absolute;
    left:50%;
    top:50%;
    margin-top:-300px;
    margin-left:-300px;
    text-align:center;
    box-shadow:0px px 10px 10px rgba(0,0,0,1);
}

演示: http://jsfiddle.net/Mfkj4/28/

有人对此有基于 css 的解决方案吗？

Answer 1

您在 box-shadow 规则中遗漏了一个数字。它说 px 而不是 0px。实例http://jsfiddle.net/Mfkj4/30/ :

box-shadow: 0px 0px 10px 10px rgba(0,0,0,1);