CSS 框阴影不起作用答案

【问题标题】：CSS Box shadow doesnt workCSS 框阴影不起作用
【发布时间】：2011-12-15 17:10:23
【问题描述】：

.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 的解决方案？

【问题讨论】：

标签： jquery css shadow

【解决方案1】：

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

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

【讨论】：

`box-shadow:0 0 10px 10px rgba(0,0,0,1);没有'px'就可以写零
@mat：我同意你可以写0 或0px。由于这通常是个人选择，并且他已经使用 px 作为他的零值，我继续在答案中使用它以明确导致问题的实际原因。

【解决方案2】：

box-shaddow 属性的 CSS 存在一些问题

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

所有值都是必需的，您有 1 个值 px 正在杀死要启动的进程。这应该是

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

其次，您缺少在 Mozilla 和 Webkit（Safari 和 Chrome）上工作的 -moz- 和 -webkit- 变体，如 CSS Tricks 所示。最终代码应该是

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

您可以看到小提琴here - 请注意，为了便于查看，我更改了您的框的大小。

我希望这会有所帮助:-)

【讨论】：

实际上box-shadow 需要在前缀版本之后，而不是之前。否则，将永远不会采用较新的标准实现，只会采用较旧的前缀实现。