使用引导向顶部固定导航条添加阴影

我正试图通过引导在导航栏上添加阴影,但我似乎无法理解。也许有人能给我指出正确的方向。我所看到的关于类似主题的所有其他问题都有令人难以置信的冗长的混乱代码回答,但必须有一种简单的方法来解决,这不就是引导的全部意义吗

以下是与导航相关的HTML:

<div class=“导航栏导航栏反向导航栏固定顶部”id=“自定义导航”>
<div class=“导航栏内部”>
<div class=“container”>
<a class=“btn btn navbar”数据切换=“collapse”数据目标=“.nav collapse”>
<span class=“图标栏”&gt&lt/span>
<span class=“图标栏”&gt&lt/span>
<span class=“图标栏”&gt&lt/span>
&lt/a>
<a class=“brand”href=”https://stackoverflow.com/questions/14904731/index.html“>电子服务&lt/a>
<div class=“导航崩溃”>
<ul class=“导航向右拉”>
<李&gt&书信电报;a href=”https://stackoverflow.com/questions/14904731/index.html“>主页&lt/a&gt&lt/李>
<李&gt&书信电报;a href=“”>关于&lt/a&gt&lt/李>
<李&gt&书信电报;a href=”https://stackoverflow.com/questions/14904731/contact.html“>联系&lt/a&gt&lt/李>
<li class=“下拉列表”>
<a href=“”class=“dropdown toggle”数据切换=“dropdown”>
服务
<b class=“插入符号”&gt&lt/b>
&lt/a>
<ul class=“下拉菜单”>
<李&gt&书信电报;a href=“”>舞台设计,;构建&lt/a&gt&lt/李>
<李&gt&书信电报;a href=“”>活动策划及策划;管理&lt/a&gt&lt/李>
<李&gt&书信电报;a href=“”>视频制作&lt/a&gt&lt/李>
<李&gt&书信电报;a href=“”>音频制作&lt/a&gt&lt/李>
<李&gt&书信电报;a href=“”>照明生产&lt/a&gt&lt/李>
&lt/ul>
&lt/李&gt<!--下拉菜单-->
<li class=“下拉列表”>
<a href=“”class=“dropdown toggle”数据切换=“dropdown”>
事件
<b class=“插入符号”&gt&lt/b>
&lt/a>
<ul class=“下拉菜单”>
<李&gt&书信电报;a href=“”>企业活动&lt/a&gt&lt/李>
<李&gt&书信电报;a href=“”>公民活动&lt/a&gt&lt/李>
<李&gt&书信电报;a href=“”>慈善活动&lt/a&gt&lt/李>
<李&gt&书信电报;a href=“”>盛大开幕式&lt/a&gt&lt/李>
<李&gt&书信电报;a href=“”>音乐会&lt/a&gt&lt/李>
&lt/ul>
&lt/李&gt<!--下拉菜单-->
&lt/ul&gt<!--/。导航-->
&lt/部门&gt<!--/。导航崩溃-->
&lt/部门&gt<!--/。容器-->
&lt/部门&gt<!--/。导航栏内部-->
&lt/部门&gt<!--/。导航栏-->

下面是我与导航栏相关的CSS:

自定义导航{
-网络工具包盒阴影:20px 20px 20px#FC0;
-moz盒阴影:20px 20px 20px#FC0;
盒影:20px 20px 20px#FC0;
z指数:999;
}

我知道,以我为阴影设置的当前px维度,它将看起来像一个实心块。一旦我能让这该死的东西工作起来,我打算调整一下。谢谢你的帮助和指点

我爱你

在css中,将以下内容添加到.navbar类规则中

.navbar{
-网络工具包盒阴影:0 8px 6px-6px#999;
-moz盒阴影:0 8px 6px-6px#999;
盒影:0 8px 6px-6px#999;
/*你剩下的造型*/
}

编辑

有一个很棒的在线工具来生成方块阴影代码(感谢cssmatic.com上的人们)。您可以调整阴影的外观,它将生成所需的所有代码以及任何特定的浏览器前缀(webkit、mozilla等)。然后可以将代码复制到css中

http://www.cssmatic.com/box-shadow

您还可以在同一站点中找到其他css效果

发表评论