Question

我正试图让阴影出现在我的div下面。到目前为止它适用于除铬/铬之外的任何物质。简而言之，绘制阴影的div并未按预期显示，即使设置了z-index属性，阴影也会显示在 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);
      }

Answer 1

这样的事吗？我移动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>

Chrome下拉阴影框出现在div上方

1 个答案: