Css阴影全屏长度

Question

框阴影基本上是你的形状模糊。

这意味着在边缘处阴影会向上弯曲。

如果你不想要那个怎么办？如果你的影子是一个顶部栏并且你不希望它看起来像它结束了怎么办？

问题：

期望的效果：

我如何获得这个？

html：

<div class="TopBar"> </div>

css：

.TopBar {
    box-shadow: 0 4px 28px black;
}

我是否应该使用比屏幕宽度大的绝对定位元素？

Answer 1

您可以在阴影中添加spread参数（外观不完全相同，但至少它符合您的要求）：

＆＃13;

＆＃13;

html,
body {
  margin: 0;
}

.TopBar {
  height: 40px;
  background: #444;
  box-shadow: 0px 4px 24px 16px black;
}

＆＃13;

<div class="TopBar"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

假的！您可以使用线性渐变和伪元素来获得所需的效果：

.TopBar {
  height: 50px;
  background: gray;
  position: relative;
}
.TopBar::after {
  content: "";
  background: linear-gradient(to bottom, rgba(0,0,0,.8) 0%,rgba(0,0,0,0) 100%);
  position: absolute;
  width: 100%;
  height: 20px;
  top: 100%;
}

<div class="TopBar"> </div>

Answer 3

您可以添加一个伪元素（：before）以将其扩展到原始容器之外，从而获得更宽的阴影：

html, body { margin:0; padding: 0 }

.TopBar {
  height: 50px;
  position: relative;
}
.TopBar:before {
  content: "";
  display: block;
  position: absolute;
  height: 100%;
  width: 100%;
  background: #454545;
  box-shadow: 0 4px 28px #000;
  transform: scaleX(1.1);
  z-index: -1;
}
.TopBar .content {
  color: #add8e6;
}

<div class="TopBar">
  <div class="content">Here's some text inside my top bar</div>
</div>