Box-Shadow Arc 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

将此 { "attribute_code": "image", "value": "/6/4/64275-152378-large.jpg" }, { "attribute_code": "small_image", "value": "/6/4/64275-152378-large.jpg" }, { "attribute_code": "thumbnail", "value": "/6/4/64275-152378-large.jpg" } class