Question

因此，在我的网站上，我有一个topmenu，然后是我的徽标。我想在我的徽标下方应用一个盒子阴影，但我无法应用它。

我想在徽标部分下面留一个阴影，这样我的旋转木马会更好地流动。

.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

您的问题有点不清楚 - 您可以通过“徽标部分下方的阴影”来更具体地说明吗？

我为您的代码添加了一些调试阴影，以防有用。我让阴影使用鲜艳的颜色来提高可视性，我添加了一个新的规则来为徽标本身应用阴影，以防你的意思。

如果你想在字母背后的阴影意义上“在徽标部分下面”留下阴影，那么很可能需要在Photoshop或创建徽标的任何地方完成。 CSS Box-shadows对于将阴影应用于元素/容器或HTML文本非常有用，但不一定用于在PNG内容中添加逐像素阴影。

var city_sheet = ss.getSheetByName(cities[i]);
var city_rows = city_sheet.getMaxRows();

// set one
var cat_range = city_sheet.getRange(1,1,city_rows).getValues(); // this one takes 10 seconds
var subcat_range = city_sheet.getRange(1,2,city_rows).getValues(); // ~0 sec
var value_range = city_sheet.getRange(1,4,city_rows).getValues(); // ~0 sec

// set two
var city_data = city_sheet.getRange(1, 1, city_rows, 4); // this one takes about 10 seconds

.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 */
}

箱影不影响？

1 个答案: