因此,我的网站有一个标题和一个包含Revolution Slider的div.我正在尝试在标题下方添加一个框阴影 – 并在滑块上方.但它不起作用,除非我还在标题中添加了margin-bottom – 但这使得整个练习没有实际意义.
这是代码：
- #header {
- display:block;
- min-height: 99px;
- background: #FFFFFF;
- border-top: 3px solid #8dddcd;
- border-bottom: 1px solid #ecf0f1;
- line-height: 99px;
- Box-shadow: 0 10px 10px 10px rgba(0,0.3);
- }
- #rev {
- position: relative;
- }
- <div id="header"></div>
- <div id="rev">the slider</div>
有人可以帮我找出造成这种情况的原因吗？
解决方法
请参阅以下问题：
> Does css border-shadow add to an element’s size
> Is css box-shadow part of element’s box model?
An outer Box-shadow casts a shadow as if the border-Box of the element were opaque. The shadow is drawn outside the border edge only
因此,如果您不想重叠,则必须自己添加保证金
- #header {
- Box-shadow: 5px 5px 5px 5px rgba(0,0.3);
- margin-bottom: 10px;
- }
- #slider {
- position: relative;
- }
- <div id="header">Header</div>
- <div id="slider">Slider</div>
