html - 如何使用 box-shadow 切断 CSS 发光效果的顶部？

Question

我正在使用以下 div 创建漂亮的 CSS 发光效果:

.darkglow {
  width: 1px;
  height: 1px;
  border-radius: 50%;
  background-color: #000000;
  box-shadow: 0 0 450px 450px #000000;
  position: absolute;
  z-index: 1;
}

<div class="darkglow"></div>

如何切掉效果的顶部，使显示不显示完整的圆，而是显示半月样式？我已经尝试使用 overflow: hidden 进行各种修复，但这似乎并没有消除效果。

Answer 1

尝试添加此 css，使用属性 border-radius 和 box-shadow:

.darkglow:after {
    width: 1px;
    height: 1px;
    content: "";
    position: absolute;
    background-color: #fff;
    z-index: 1;
    border-radius:250px;
    box-shadow: 0 0 125px 250px #fff;
}

http://jsfiddle.net/hhvv5/