作者：萌星 | 来源：互联网 | 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 个解决方案
0
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.
我想知道是否有人可以告诉我,如果它是正确的方式....或提供其他选择。谢谢。
京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有 
