Question

晚上好，伙计们，

你可以给我一个建议，我想我陷入了僵局！

网站顶部有主导航菜单。问题是，我不知道我们如何在导航底部直接在导航底部输入阴影，它不会停止左右边界的工作。

所以，如果我将阴影放在另一个区块（在我的情况下是“circle_shadow”），它将不会掩盖我们的边界，它将在导航后创建新的空间。

我感兴趣的是，我们如何在导航边框上将这种阴影放在我们的菜单上？

请看一下：

<div class="container">
    <div class="row">
        <div class="common_block">
               <div class="col-lg-2">Here we have a logo_1</div>
               <div class="col-lg-8 border">Here is navigation</div>
               <div class="col-lg-2">Here is logo_2</div>
               <div class="circle_shadow"></div>
        </div>
    </div>
</div>

CSS：

.border {
    border-right: 1px solid black;
    border-left: 1px solid black;
}

.circle_shadow {
    position: relative;
    overflow: hidden;
    padding:5px;
}

.box_center_shadow_m:before {
    content: "";
    height: 100px;
    position: absolute;
    right: 10px;
    top: -99px;
    left: 10px;
    border-radius: 50%/60px;
    box-shadow: 0 0 30px rgba(0,0,0,0.5);
}

我附上了一些图片：

Answer 1

有点难以理解你的要求，这里可能存在英语障碍。但是如果你正在寻找一个圆形阴影，这里有一些样本：

.roundedCorner { 
    width:350px;
    height:200px; 
    border: solid 1px #555; 
    background-color: #eed; 
    box-shadow: 10px -10px 5px rgba(0,0,0,0.6); 
    -moz-box-shadow: 10px -10px 5px rgba(0,0,0,0.6); 
    -webkit-box-shadow: 10px -10px 5px rgba(0,0,0,0.6); 
    -o-box-shadow: 10px -10px 5px rgba(0,0,0,0.6); 
    border-radius:25px; 
}

.circle { 
    width:150px;height:150px; 
    border: solid 1px #555; 
    background-color: #eed; 
    box-shadow: 10px -10px rgba(0,0,0,0.6); 
    -moz-box-shadow: 10px -10px rgba(0,0,0,0.6); 
    -webkit-box-shadow: 10px -10px rgba(0,0,0,0.6); 
    -o-box-shadow: 10px -10px rgba(0,0,0,0.6); 
    border-radius:100px; 
}

a CoreLangs

可以看到更多影子选项

Answer 2

抱歉不明白的问题。是的，我知道如何使用圆形阴影。问题不在于如何创建圆角投影。问题是如何将这个圆形阴影放入导航块的底部。这是一个主要问题。

看看这段代码： I）

 <div class="container">

    <div class="row " style="background-color:#454545">
     <div class="common_block">
        <div class="col-md-2" style="background-color:#454545">
           <a href="#" title="Omvana">
              <img src="images/images.jpg" alt="Logo" />
           </a>
        </div>
        <div class="col-md-8 border " style="background-color:#454545">
        <ul class="h_menu">
            <li class="active">
                <a href="#" title="NEWS" >NEWS</a>
            </li>
            <li >
                    <a href="#" title="EVENTS">EVENTS</a>
            </li>
            <li >
                    <a href="#" title="DOWNLOADS">DOWNLOADS</a>
            </li>
                <li >
                    <a href="#" title="TOUR">TOUR</a>
                </li>
            </ul>
        </div>
        <div class="col-md-2" style="background-color:#454545">
            <div class="block_logo_2">
                <a href="#" title="logo_2" class="logo_2"></a>
            </div>
        </div>
        <div class="rounded_drop_shadow">

        </div>
     </div>
   </div>
</div>

CSS：

 .rounded_drop_shadow {
    position: relative;
    background: none repeat scroll 0% 0% transparent;
    overflow:hidden;
    padding:3px;
}

    .rounded_drop_shadow:before {
    content: "";
    height: 100px;
    position: absolute;
    right: 10px;
    top: -100px;
    left: 10px;
    border-radius: 50%/60px;
    box-shadow: 0 0 60px rgba(0,0,0,0.3);
}

现在，此图像显示，阴影已添加到导航块，但在之后的额外空间中。

http://i.imgur.com/rFuBnOB.png

但是，我的目标不是扩展导航块，只是我们必须将它放在底部的导航菜单上方。好像在它之上！

它应该像这里： http://i.imgur.com/ed3zWJL.png

现在，我找到了一个解决方案，但我想知道你是否看一看，并能够提供有关此选项的建议：也许，我们应该把block div与class =＆＃34; rounded_drop_shadow＆＃34;在另一个块div里面有class =＆＃34; shadow＆＃34; （它们都仍然在common_block中）并且使用position：absolute？

<div class="common_block">
        <div class="col-md-2" style="background-color:#454545">
           <a href="#" title="Omvana">
              <img src="images/images.jpg" alt="Logo" />
           </a>
        </div>
        <div class="col-md-8 border " style="background-color:#454545">
        <ul class="h_menu">
            <li class="active">
                <a href="#" title="NEWS" >NEWS</a>
            </li>
            <li >
                    <a href="#" title="EVENTS">EVENTS</a>
            </li>
            <li >
                    <a href="#" title="DOWNLOADS">DOWNLOADS</a>
            </li>
                <li >
                    <a href="#" title="TOUR">TOUR</a>
                </li>
            </ul>
        </div>
        <div class="col-md-2" style="background-color:#454545">
            <div class="block_logo_2">
                <a href="#" title="logo_2" class="logo_2"></a>
            </div>
        </div>
        <div class="shadow">
           <div class="rounded_drop_shadow"></div></div>
        </div>
     </div>

CSS

.box_center_shadow {
   position: absolute;
   top: 64px;
   left: 0px;
   right: 0px;
}

我想知道是否有人可以告诉我，如果它是正确的方式......或提供其他选择。感谢。

如何在导航底部添加圆形阴影

2 个答案: