这样一个布局如何用HTML5和CSS3来显示？

图片说明

border-radius变为圆形，2个圆形嵌套

 <!doctype html>
<style>
body{background:#ccc}
div.line{height:30px;background:#000;position:relative}
div.line div{-moz-border-radius:30px;-webkit-border-radius:30px;border-radius:30px;-khtml-border-radius:30px;background:#000;position:absolute;width:60px;height:60px;left:50%;margin-left:-30px;bottom:0}
div.line div.orange{-moz-border-radius:20px;-webkit-border-radius:20px;border-radius:20px;-khtml-border-radius:20px;background-color:orange;width:40px;height:40px;left:50%;margin-left:-20px;bottom:10px}
</style><br /><br /><br />
<div class="line">
    <div></div>
    <div class="orange"></div>
</div>

这算什么布局，无非就是上下两栏，某一栏的某侧边距上放一个背景图，中间的球。另一个背景为黑色。

div背景颜色设成灰色，把黑色部分做成一条，放在下面，红色球外包一圈黑做成一张图，放在中间

分层就好了，很简单的。把那个圆放到最上面一层