作者:fdsfdsfsfsfsfsfsfsfsafsf | 来源:互联网 | 2023-05-18 08:04
Imtryingtoachievethiseffectwithcss3:我试图用css3实现这个效果:TheHTMLcodeiscleanlysomethingl
I'm trying to achieve this effect with css3:
我试图用css3实现这个效果:
The HTML code is cleanly something like
HTML代码很简单
...
...
...
...
and the css is, for the moment, something like
而目前,css就是这样的
header {
display: block;
width: 900px;
height: 230px;
margin: 0 auto;
border: 1px solid #211C18;
...
box-shadow: 2px 4px 20px #005377;
-moz-box-shadow: 2px 4px 20px #005377;
-webkit-box-shadow: 2px 4px 20px #005377;
}
#wrapper {
width: 820px;
margin: 0 auto;
...
border-right: 1px solid #211C18;
border-bottom: 1px solid #211C18;
border-left: 1px solid #211C18;
...
box-shadow: 2px 4px 20px #005377;
-moz-box-shadow: 2px 4px 20px #005377;
-webkit-box-shadow: 2px 4px 20px #005377;
}
In order to obtain the desired result, I need to:
为了获得理想的结果,我需要:
- Hide the top shadow of the main div (no problem with that)
- 隐藏主div的顶部阴影(没问题)
- Bring header's bottom shadow in front of the main div, and not behind as it is right now.
- 将标题的底部阴影置于主div的前面,而不是现在的背后。
I've been reading a lot about box-shadow, and I haven't found a solution that really pleases me... Any idea?
我一直在阅读很多关于盒子影子的内容,而且我还没有找到一个让我高兴的解决方案......任何想法?
3 个解决方案