html - 箱形阴影弧 CSS

Question

我正在尝试复制与此类似的内容：

div底部的阴影有点弧度，在中心更高，然后变薄，更远一点。

我想知道这是否可以通过css中的某种盒子阴影效果来实现。目前，我的 div 底部出现了一个盒子阴影，它一直保持平坦。

根据要求的当前框阴影：

box-shadow: inset 0 -30px 30px -30px #888888;

任何建议表示赞赏。

Answer 1

这是使用径向渐变创建阴影的解决方案。我的使用像素大小，如果您希望它跨越整个页面而不是在文本/菜单链接下，可以将其更改为百分比。

.menu {
  height: 100px;
  background: radial-gradient(ellipse 100% 7% at 50% 100%, rgba(55, 55, 55, 0.5) 200px, rgba(55, 55, 55, 0.1) 360px, white 380px);
  text-align: center;
}
.menu .menu-item {
  padding-left: 2%;
  padding-right: 2%;
}

<header class="menu">
  <h1>Rolex</h1>
  <span class="menu-item">watches</span>
  <span class="menu-item">about rolex</span>
  <span class="menu-item">world of rolex</span>
  <span class="menu-item">retailers</span>
  <span class="menu-item">whishlist</span>
</header>

Answer 2

您可以创建一个伪选择器，在页面上插入一些内容，使其变圆并对其应用框阴影。请注意 z-index 以使其落后于父级：

http://plnkr.co/edit/UhdRAuJ0VIPHrnufkwm9?p=preview

.shadowy {
  position: relative;
  width: 100%;
  height: 40px;
  border: 1px solid black;
  margin-top: 100px;
  background: white;
}

.shadowy:before {
  content: '';
  position: absolute;
  background: transparent;
  top: 0;
  left: 10%;
  width: 80%;
  height: 20px;
  box-shadow: 0 0 30px black;
  border-radius: 100%;
  z-index: -1;
}

Answer 3

把这个class box-shadow: 0 10px 6px -6px #777;