【css】半円の影をつける

Yukimi Sato 458views 更新:2014年6月17日
/* 直径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;
}

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません