因此,在我的网站上,我有一个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>
答案 0 :(得分:2)
您的问题有点不清楚 - 您可以通过“徽标部分下方的阴影”来更具体地说明吗?
我为您的代码添加了一些调试阴影,以防有用。我让阴影使用鲜艳的颜色来提高可视性,我添加了一个新的规则来为徽标本身应用阴影,以防你的意思。
如果你想在字母背后的阴影意义上“在徽标部分下面”留下阴影,那么很可能需要在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 */
}