html - 框影不生效？

Question

所以在我的网站上，我有一个顶部菜单，然后是我的 Logo 。我想在我的 Logo 下方应用框阴影，但无法应用。

我想要在 Logo 部​​分下方添加一个阴影，以便它在我的轮播中更好地流动。

.topmenu {
  background: #262626;
  color: #ffffff;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  padding: 0;
  margin: 0;
  height: 49px;
  padding: 0 15px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.topmenu .mymenu li a {
  color: #ffffff;
  display: block;
  height: 49px;
  padding: 15px 10px 0 10px;
  margin: 0;
  text-decoration: none;
  font-size: 14px;
}
.topmenu .mymenu li {
  margin: 0;
  padding: 0;
  float: left;
  list-style: none;
}
user agent stylesheetli {
  display: list-item;
  text-align: -webkit-match-parent;
}
.topmenu .mymenu {
  outline: 0;
  padding: 0;
  margin: 0;
  list-style: none;
  float: right;
}
#logo {
  background: #333333;
  padding: 70px 25px 20px 15px;
}

<a name="top" id="top"></a>
<div id="header">
  <div class="topmenu">

    <ul class="mymenu">
      <li><a href="http://www.mythic-kingdom.org" class="home"><span class="octicon octicon-home"></span> Home</a>
      </li>

      <li><a href="http://www.mythic-kingdom.org/forum/index.php" class="home"><span class="octicon octicon-comment-discussion"></span> Forum</a>
      </li>

      <li><a href="http://www.mythic-kingdom.org/blog.html" class="home"><span class="octicon octicon-book"></span> Blog</a>
      </li>

      <li><a href="#" class="home"><span class="octicon octicon-file-text"></span> Store</a>
      </li>

      <li><a href="http://www.mythic-kingdom.org/forum/misc.php?action=help" class="help"><span class="octicon octicon-question"></span> Help</a>
      </li>
    </ul>



  </div>
  <div id="logo">

    <a id="logo-image" href="http://www.mythic-kingdom.org/forum/index.php">
      <img src="http://www.mythic-kingdom.org/forum/images/MythicKingdom/Line-Logo-myBB.png" alt="Mythic Kingdom :: Forum" title="Mythic Kingdom :: Forum" />
    </a>
  </div>
</div>

Answer 1

您的问题有点不清楚 - 您能否通过“ Logo 部分下方的阴影”更具体一些？

我在您的代码中添加了一些调试阴影以防有帮助。我让阴影使用明亮的颜色以提高可见性，并且我添加了一条新规则以将阴影应用于 Logo 本身，以防你就是这个意思。

如果您想要“在 Logo 部分下方”的阴影，即字母本身后面的阴影，则很可能需要在 Photoshop 中或在创建 Logo 的任何地方完成。 CSS Box-shadows 对于将阴影应用于元素/容器或 HTML 文本很有用，但不一定要在 PNG 内容中添加逐像素阴影。

.topmenu {
  background: #262626;
  color: #ffffff;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  padding: 0;
  margin: 0;
  height: 49px;
  padding: 0 15px;
  box-shadow: 0 1px 3px rgba(255, 0, 0, 1);
  /* Debug Shadow */
}
.topmenu .mymenu li a {
  color: #ffffff;
  display: block;
  height: 49px;
  padding: 15px 10px 0 10px;
  margin: 0;
  text-decoration: none;
  font-size: 14px;
}
.topmenu .mymenu li {
  margin: 0;
  padding: 0;
  float: left;
  list-style: none;
}
user agent stylesheetli {
  display: list-item;
  text-align: -webkit-match-parent;
}
.topmenu .mymenu {
  outline: 0;
  padding: 0;
  margin: 0;
  list-style: none;
  float: right;
}
#logo {
  background: #333333;
  padding: 70px 25px 20px 15px;
  box-shadow: 0 3px 3px rgba(0, 255, 0, 1);
  /* Debug Shadow */
}
#logo img {
  box-shadow: 0 3px 3px rgba(255, 0, 255, 1);
  /* Debug Shadow */
}

<a name="top" id="top"></a>
<div id="header">
  <div class="topmenu">

    <ul class="mymenu">
      <li><a href="http://www.mythic-kingdom.org" class="home"><span class="octicon octicon-home"></span> Home</a>
      </li>

      <li><a href="http://www.mythic-kingdom.org/forum/index.php" class="home"><span class="octicon octicon-comment-discussion"></span> Forum</a>
      </li>

      <li><a href="http://www.mythic-kingdom.org/blog.html" class="home"><span class="octicon octicon-book"></span> Blog</a>
      </li>

      <li><a href="#" class="home"><span class="octicon octicon-file-text"></span> Store</a>
      </li>

      <li><a href="http://www.mythic-kingdom.org/forum/misc.php?action=help" class="help"><span class="octicon octicon-question"></span> Help</a>
      </li>
    </ul>



  </div>
  <div id="logo">

    <a id="logo-image" href="http://www.mythic-kingdom.org/forum/index.php">
      <img src="http://www.mythic-kingdom.org/forum/images/MythicKingdom/Line-Logo-myBB.png" alt="Mythic Kingdom :: Forum" title="Mythic Kingdom :: Forum" />
    </a>
  </div>
</div>