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

作者：萌星 | 来源：互联网 | 2023-06-15 17:47

Goodevening,guys,晚上好,伙计们,Couldyoupleasegivemeanadvice,IthinkIwasatadeadlock!能不能给我

Good evening, guys,

晚上好,伙计们,

Could you please give me an advice, I think I was at a deadlock!

能不能给我一个建议,我想我陷入了僵局!

There is the main navigation menu on the top of website. Problem is that, I don't know how we can input shadow over the our navigation, directly in the bottom of navigation and it won't stop work of our left and right borders.

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

So, if I will put our shadow in another block (in my case "circle_shadow"), it won't cover up our borders, it will create new space after navigation.

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

I am interested, how can we put this kind of shadow on our menu, over the navigation borders?

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

Please, take a look:

请看一下:


    
        
               Here we have a logo_1
               Here is navigation
               Here is logo_2

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);
}

Here I attached some images:

我附上了一些图片:

2 个解决方案

#1

It is a little hard to follow what you are asking, there might be an english barrier here. But if you are looking for a rounded drop shadow, here are some samples:

跟你所问的有点难,这里可能有英语障碍。但是如果你正在寻找圆形阴影,这里有一些样本:

.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; 
}

More shadow options can be seen at a CoreLangs

CoreLangs可以看到更多的影子选项

#2

Sorry for not clear question. Yes, I know how to use rounded drop shadow. Problem is not about how create rounded drop shadow. Problem is how can we put this rounded drop shadow into the bottom of navigation block. This is the major question.

对不起,问题不明确。是的,我知道如何使用圆形阴影。问题不在于如何创建圆形阴影。问题是如何将这个圆形阴影放入导航块的底部。这是一个主要问题。

Take a look on this code: I)

看看这段代码:I)

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);
}

Now, this image shows, that shadow was added to the navigation block, but in extra space after.

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

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

But, my target is not extend block of navigation, just we have to put it above of navigation menu on the bottom. As if on top of it!

但是,我的目标不是扩展导航块,只需要将它放在底部的导航菜单上方。好像在它之上!

It should be like here: http://i.imgur.com/ed3zWJL.png

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

Now, I found a solution, but I wonder if you take a look and will be able to give advice about this option: Maybe, we should put block div with class="rounded_drop_shadow" inside another block div with class="shadow" (Both of them will still inside common_block) and play with position:absolute?

现在,我找到了一个解决方案,但是我想知道你是否看一看并且能够给出关于这个选项的建议:也许,我们应该将block div与class =“rounded_drop_shadow”放在另一个块div中,并使用class =“shadow”(它们都仍然在common_block内部并且使用position:absolute?

CSS

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

I wonder if somebody can tell me, if it is right way....or offer another options. Thanks.

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

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

2 个解决方案

#1

#2

Java代理模式详解：静态代理、JDK动态代理与Cglib动态代理

Flink与Kafka集成时事务频繁失败及解决方案

圣诞夜的驯鹿之谜：鲁道夫是公是母？

Python流程控制与条件判断详解

Lua脚本深入解析：元表与元方法的应用

拖拉切割直线

Java 泛型基础与应用详解

Web网络基础

VS Code 中 .vscode 文件夹配置详解

Spring Boot集成与使用JPA详解

HTML 手风琴效果实现

J2EE平台的13项核心技术规范

设计模式系列-原型模式

Xamarin.Forms 开发技巧：绝对布局与定时器的应用

深入解析C语言中的双重指针