css框阴影不起作用

Question

盒子阴影不起作用。其他div box-shadow工作得很好，这是我的HTML代码：

＆＃13;

＆＃13;

#header {
  background-color: #6666ff;
  box-shadow: 20px 20px 10px #888888;
}

#header .headercontent .setting {
  float: right;
}

#header .headercontent a {
  color: #000066;
  text-decoration: none;
}

#header .headercontent {
  list-style: none;
}
#container{  
    width:100%;  
    background-color:#ccffff;  
}  

＆＃13;

<div id="header">
  <div class="headercontent">
    <a href="index.php">
      <font size="6">Mine</font>
    </a>
    <input type="text" placeholder="Cari">
    <nav class='setting'>
      <ul>
        <li><a href="testingone.php">testing 1</a></li>
        <li><a href="testingtwo.php">testing 2</a></li>
      </ul>
    </nav>
  </div>
</div>
<div id="container">testing my body container</div>

＆＃13;

＆＃13;

＆＃13;   

CNC中
我创建虚拟页面似乎容器背景颜色ovveride阴影

Answer 1

你必须使标题相对＆amp;使盒子阴影透明，

检查代码段

＆＃13;

＆＃13;

#header {
  background-color: #6666ff;
  box-shadow: 20px 20px 10px rgba(0,0,0,0.4);
 position: relative;
}

#header .headercontent .setting {
  float: right;
}

#header .headercontent a {
  color: #000066;
  text-decoration: none;
}

#header .headercontent {
  list-style: none;
}
#container{  
    width:100%;  
    background-color:#ccffff;  
height:500px;
}  

＆＃13;

<div id="header">
  <div class="headercontent">
    <a href="index.php">
      <font size="6">Mine</font>
    </a>
    <input type="text" placeholder="Cari">
    <nav class='setting'>
      <ul>
        <li><a href="testingone.php">testing 1</a></li>
        <li><a href="testingtwo.php">testing 2</a></li>
      </ul>
    </nav>
  </div>
</div>
<div id="container">testing my body container</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

你可以更清楚地知道什么是无效的。我尝试运行相同的代码，发现显示了框阴影。 this link

你也可以在这里查看小提琴 #header { background-color: #6666ff; box-shadow: 10px 10px #888888; }