Question

我希望阴影只出现在一侧（顶部），只有css，

我尝试了很多解决方案但总是有各方面的影子

这是我的尝试

.box-container{
  width:100%;
  height: 80px;
  padding:10px 10%;
  background-color: #f00;
}
.box-inner{
  width:80%;
  height: 100%;
  background-color: #ff0;
  box-shadow: inset 0 5px 5px rgba(0,0,0,0.5);
}

<div class="box-container">
<div class="box-inner"></div>
</div>

Answer 1

尝试使用它：

.box-container{
  width:100%;
  height: 80px;
  padding:10px 10%;
  background-color: #f00;
}
.box-inner{
  width:80%;
  height: 100%;
  background-color: #ff0;
  box-shadow: inset 0 20px 20px -20px rgba(0,0,0,0.8);
}

<div class="box-container">
<div class="box-inner"></div>
</div>

Answer 2

请仅针对顶部

尝试此box-shadow: inset 0 7px 9px -7px rgba(0,0,0,0.7);

认为这会对你有帮助......

Answer 3

尝试使用此

＆＃13;

.box-container{
  width:100%;
  height: 80px;
  padding:10px 10%;
  background-color: #f00;
}
.box-inner{
  width:80%;
  height: 100%;
  background-color: #ff0;
  -moz-box-shadow:    inset  0  8px 8px -8px rgba(0,0,0,0.8);
  -webkit-box-shadow: inset  0  8px 8px -8px rgba(0,0,0,0.8);
  box-shadow:        inset  0  8px 8px -8px rgba(0,0,0,0.8);
}

＆＃13;

<div class="box-container">
<div class="box-inner"></div>
</div>

＆＃13;

有关box-shadow的更多信息，请查看http://www.css3.info/preview/box-shadow/。

希望这就是你要找的东西！

我怎么能从一边把阴影插入

3 个答案: