盒影弧 CSS

Question

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

div 底部的阴影有些弧形，中心较高，然后逐渐变薄，更远的地方什么也没有。

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

请求的当前框阴影：

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

感谢任何建议。

Answer 1

您可以创建一个伪选择器，在页面上插入一些内容，使其变圆并对其应用框阴影。注意 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 2

放这个classbox-shadow: 0 10px 6px -6px #777;

Answer 3

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

.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>

盒影弧 CSS

Box-Shadow Arc CSS

html

css

box-shadow