Question

我对外div：

有这个css

#outer{    
    display: inline-block;
    width: 100%;
    background-color: #FFFFFF;
}

这个内部应该给出一个盒子阴影，但它没有：

#inner{
    margin-top: 50px;
    margin-bottom: 50px;
    width: 100%;
    height: 5px;
    float: left;
    position: relative;
    box-shadow: 0px 32px 88px 36px rgba(0,0,0,0.13);
    background-color: black;
    z-index: 100;
    transform: translate(0, 0);
}

这是html：

<div id="outer">
     <header >
            <!-- some section -->
     </header>
     <section >
            <!-- some section -->
     </section>
     <section >
            <!-- some section -->
     </section>

     <h1>Text text text</h1>

     <section >
            <!-- some section -->
     </section>

            <!-- THIS HERE would be the shaddow -->
     <div id="inner"></div>
     <section >
            <!-- some section -->
     </section>
 </div>

正如您所看到的，我已尝试使用transform和z-index进行了一些操作，但似乎没有任何效果。

Answer 1

这是因为您的模糊半径很高，而透明度却很低。

更改此项：box-shadow: 0px 32px 88px 36px rgba(0,0,0,0.13);

对于这样的内容：box-shadow: 0px 32px 10px 36px rgba(0,0,0,0.5);

#outer {
  display: inline-block;
  width: 100%;
  background-color: #FFFFFF;
}

#inner {
  margin-top: 50px;
  margin-bottom: 50px;
  width: 100%;
  height: 5px;
  float: left;
  position: relative;
  box-shadow: 0px 32px 10px 36px rgba(0, 0, 0, 0.4);
  background-color: black;
  z-index: 100;
  transform: translate(0, 0);
}

<div id="outer">
  <header>
    <!-- some section -->
  </header>
  <section>
    <!-- some section -->
  </section>
  <section>
    <!-- some section -->
  </section>

  <h1>Text text text</h1>

  <section>
    <!-- some section -->
  </section>

  <!-- THIS HERE would be the shaddow -->
  <div id="inner"></div>
  <section>
    <!-- some section -->
  </section>
</div>

只需将这两个值调整为所需的方式即可。

CSS Box-Shadow未显示在位置相对位置

1 个答案: