你能让 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>

你能让 div 的一部分透明并影响它的框阴影吗

can you make a section of a div transparent and affect its box-shadow

html

css

transparency

box-shadow