CSS3月亮形状 [英] CSS3 moon shape

问题描述

我正在尝试创建这样的按钮：

I am trying to create a button like this:

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

I dont know how to create a light moon shape over the top of the button.

这还差得远：小提琴演示。

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

推荐答案

仅需插入，您可以在对象顶部设置阴影样式。

With just a little inset you can style the shadow on top of the object.

例如 新月形 。

而且 此 是您想要的按钮。

And, This is the button you want.

.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月亮形状的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！