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

Answer 2

您的CSS中存在box-shaddow属性

的几个问题

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

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

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

其次，您错过了-moz-和-webkit-变体，以便在CSS Tricks中显示Mozilla和Webkit（Safari＆amp; Chrome）。最终的代码应该是

-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 - 请注意我改变了你的盒子的大小以便于查看。

我希望这会有所帮助： - ）

CSS Box阴影不起作用

2 个答案: