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

Question

大家晚上好

你能给我一个建议吗，我想我陷入了僵局!

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

所以，如果我将我们的影子放在另一个 block 中(在我的例子中是“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 看到