我试图让阴影出现在我的 div 下。到目前为止，它适用于除 chrome/chromium 之外的任何东西。 简单地说，即使设置了 z-index 属性，绘制阴影的 div 也没有显示，阴影出现在 div 上。 HTML 看起来像这样:
<body>
<div id="header" class="box clear">
<div id="logo">
<img class="obraz_srodek" src="http://ocento.hol.es/tz/logotyp.png" title="ocentologotype"/>
</div>
</div>
<div class="content">// Javascript/jQuery soon</div>
<div id="test">Padding test</div>
我的css文件是这样的:
body
{
background-image:url('bg.jpg');
background-repeat: repeat;
}
html{
height: 100%;
width: 98%;
padding:0;
margin:0;
}
body {
min-height: 100%;
min-width:98%;
}
.content{
padding-top:55px;
}
.obraz_srodek {
overflow:hidden;
height:25px;
display: block;
margin-left: auto;
margin-right: auto;
padding-top:7px;
}
#header
{
position: fixed;
background-color: white;
min-height: 40px;
min-width: 100%;
top: 0px;
left: 0px;
}
.box {
position: relative;
background-color: #fff;
box-shadow: 0 0px 5px rgba(0,0,0,0.25), 0 0 5px rgba(0,0,0,0.1) inset;
border-radius: 1% 1% 1% 1% / 1% 1% 1% 1%;
}
.box:after {
position: absolute;
width: 80%;
height: 40%;
left: 10%;
border-radius: 50%;
z-index: -4;
bottom: 0%;
content: "";
box-shadow: 0 7px 16px rgba(0,0,0,0.4);
}
最佳答案
是这样的吗？我移动了 div.box 以达到效果，chrome 不能用你的方法做到这一点 jsFiddle here
<div id="header" class="clear">
<div class="box">
<div id="logo">
<img class="obraz_srodek" src="http://ocento.hol.es/tz/logotyp.png" title="ocentologotype"/>
</div>
</div>
</div>
关于google-chrome - Chrome 下拉阴影框出现在 div 上，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16560191/