您可以将div的一部分设为透明并影响其框阴影吗？

Question

通过遵循以下示例，我设法使div的一部分透明：http://jsfiddle.net/5VDLX/144/

HTML（JSFIDDLE）

<div class="container">
    <div class="shape"></div>
    <div class="circle"></div>
</div>

CSS（JSFIDDLE）

body{
    background: yellow;
}
.shape {
    width: 500px;
    height: 75px;
    background-color: transparent;
    background-image: -webkit-radial-gradient(50% 100%, circle, transparent 50px, black 0);
    background-image: radial-gradient(50% 100%, circle, transparent 50px, black 0);
}
.circle {
    width: 100px;
    height: 100px;
    background-color: transparent;
    border: 2px solid red; /* red for demonstration */
    border-radius: 50px;
    margin: -51px 0 0 199px; /* considering borders */
}

但是div有一个盒子阴影，我想沿着透明的半圆形而不是正方形。

这可以实现吗？如果可以，怎么办？

Answer 1

您可以使用drop-shadow过滤器：

body {
  background: yellow;
}

.shape {
  width: 500px;
  height: 75px;
  background: radial-gradient(circle at 50% 100%, transparent 49px, black 50px);
  filter:drop-shadow(0 0 10px green);
}

<div class="container">
  <div class="shape"></div>
</div>