如何创建圆角阴影？

Question

很多时候我创建了简单的阴影，但现在我需要创建圆角阴影。就像在图片上

是否可以使用CSS ??

执行此操作

这是我的代码：

-webkit-box-shadow: -2px 0px 79px -2px rgba(0,0,0,0.75);
-moz-box-shadow: -2px 0px 79px -2px rgba(0,0,0,0.75);
box-shadow: -2px 0px 79px -2px rgba(0,0,0,0.75);

Answer 1

看起来你的示例图像是圆形容器中的线性渐变，所以这样做：

.round-shadow-clip {
  overflow: hidden;
}

.round-shadow {
  background-image: linear-gradient(rgba(0, 0, 0, 0.6), transparent 20%, transparent 80%, rgba(0, 0, 0, 0.6));
  border-radius: 100%;
  height: 0;
  margin-left: -10%;
  padding-bottom: 25%;
  width: 120%;
}

html {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAIAAAAC64paAAAALklEQVQ4y2N89+4dA24gKCiIR5aJgQIwqnlkaGb8//8/Hun379+PBtioZko0AwAA0Ajuvut+RAAAAABJRU5ErkJggg');
  height: 100%;
}

<div class="round-shadow-clip">
  <div class="round-shadow"></div>
</div>

Answer 2

使用伪可以执行此操作

＆＃13;

＆＃13;

div {
  position: relative;
  height: 100px;
  border-radius: 50%/40%;
  overflow: hidden;
}
div::before,
div::after {
  content: '';
  position: absolute;  
  left:0; right:0; top: -5px; height: 0;
  box-shadow: 0 0 25px 15px rgba(0,0,0,.5);
}
div::after {
  top: auto; bottom: -5px;
  box-shadow: 0 0 -25px 15px rgba(0,0,0,.5);
}

＆＃13;

<div></div>

＆＃13;

＆＃13;

＆＃13;