CSS3月亮形状

我正在尝试创建一个像这样的按钮:



我不知道如何在按钮顶部创建浅色的月亮形状。

距离还很远:Fiddle Demo。

.moon {
   width: 50px;
   height: 50px;
   border-radius: 50%;
   box-shadow: 15px 15px 0 0 green;
}

最佳答案

仅需一点inset，您就可以在对象顶部设置阴影样式。

例如。 Crescent shape。

并且，This是您想要的按钮。

.moon {
  background-color: #222;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 4px solid #222;
  /* I set 2 shadows where the first one doesn't have blur and spread for firefox fix. */
  box-shadow: inset 0px 16px #999, inset 0px 16px 1px 1px #999;
  -moz-box-shadow: inset 0px 16px #999, inset 0px 16px 1px 1px #999;
}

<div class="moon"></div>

关于CSS3月亮形状，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/34803334/