内容div阴影未显示

Question

这是我最近的项目中的代码，因为我是新手，这段代码可能缺乏一些标准。

没有精选滑块的html示例页面

我为shadow定义的类命名为'sawli'

代码HTML

<div id="container-o">
<!-- Start of Main -->
<div id="main" class="sawli">
<div id="content">
<h1>Welcome to SEOCrust</h1><hr />
<p>This is a Parragraph Text</p>
</div>
</div><!-- End of Main -->

---

的Css

#container-o{ /*Main container*/
    width:70%;
    display:block;
    padding:0;
    margin-top:-280px;
    margin-left:auto;
    margin-right:auto;
    position:relative;
}
#container-o p{
    font-size:18px;
}

#main{
    height:100%;
    width:100%;
    margin:20px auto;
    border:0px;
    padding:10px 10px 10px 10px;
}
.sawli {
    box-shadow:6px 0 4px  -4px #222 , -6px 0 4px  -4px #222;
    -moz-box-shadow:6px 0 4px  -4px #222 , -6px 0 4px  -4px #222;
    -webkit-box-shadow:6px 0 4px  -4px #222 , -6px 0 4px  -4px #222;    
}
#main #content{
    float:left;
    padding:0;
    position:relative;
}

这是我的代码片段。

请帮帮我！

Answer 1

你正在为同一个div使用两个id。尝试将id =“sawli”更改为class =“sawli”，然后更改CSS：

#sawli { ... }

到

.sawli { ... } 

不允许在同一个对象上使用两个标识符。但是你可以组合一个标识符和一个类。

请您在此处复制代码，以便我们看一下比下载代码更好的内容吗？

见：

http://jsfiddle.net/CDe3E/

实际上你可以删除一些员工：

http://jsfiddle.net/CDe3E/1/

看看这是不是你想要的。