【css】半円の影をつける

/*　直径100pxの円　*********/
.circle{
background:#fff;
width:100px;
height:100px;
border-radius:100px;
}

/*　半円の影　*********/
.circle:after{
content: "";
position:absolute;
height:50px;
width:100px;
border-radius: 100px 100px 0 0;
-moz-border-radius: 100px 100px 0 0;
-webkit-border-radius: 100px 100px 0 0;
background:rgba(0, 0, 0, 0.1);
box-shadow:0px 0px 1px rgba(0, 0, 0, 0.1);
left:0px;
top:0px;
z-index:-1;
}