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

Question

我试图使用类似于这张图片的CSS3制作关机按钮
http://static.desktopnexus.com/thumbnails/25080-bigthumbnail.jpg
到目前为止,我得到了这个.问题在于我无法使"半圆"看起来像图像中心的那个圆圈,不能将"半圆"和箱形阴影中心化为"半圆".
您有什么建议可以改善我想要做的事情吗？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>?

而且这里有一个演示.