如何使用CSS3制作关机按钮？

Question

我正在尝试使用类似于此图片的CSS3制作关机按钮 http://static.desktopnexus.com/thumbnails/25080-bigthumbnail.jpg
到目前为止，我得到了this。问题在于我无法使“半圆”看起来像图像中心的那个圆圈，不能将“半圆”和箱形阴影的中心称为“半圆”。
您有什么建议可以改善我想要做的事情吗？ Thnx提前！

Answer 1

这是我的尝试：

.shutdown {
    border: 8px solid #0cf;
    border-radius: 100px;
    box-shadow: 0 0 10px #0cf, inset 0 0 10px #0cf;
    height: 100px;
    width: 100px;
}

.shutdown .inner {
    border: 5px solid #0cf;
    border-radius: 100px;
    box-shadow: 0 0 10px #0cf, inset 0 0 10px #0cf;
    height: 30px;
    left: 30px;
    position: relative;
    top: 30px;
    width: 30px;
}

.shutdown .bar {
    border-left: 5px solid #0cf;
    box-shadow: 0 0 10px #0cf;
    height: 20px;
    left: 47px;
    position: relative;
    top: -15px;
    width: 0;
}

.shutdown .sub-bar {
    border-left: 11px solid black;
    height: 30px;
    margin-left: 44px;
    margin-top: -20px;
    position: absolute;
    width: 0;
}​

以下是HTML结构：

<div class="shutdown">
    <div class="inner"></div>
    <div class="sub-bar"></div>
    <div class="bar"></div>
</div>​

here's a demo。