Question

如何用html和css画出三个同心圆

Answer 1

<style>
    .container{position:absolute;top:50%;left:50%;width:400px;height:400px;margin-top:-200px;margin-left:-200px;border:solid 1px #ccc;}
    .container div{position:absolute;top:50%;left:50%;border-radius:100%;}
    .container .A{width:300px;height:300px;border:solid 1px #c00;margin-left:-150px;margin-top:-150px;background-color:#c00;}
    .container .B{width:250px;height:250px;border:solid 1px #2080ff;margin-left:-125px;margin-top:-125px;background-color:#2080ff;}
    .container .C{width:200px;height:200px;border:solid 1px #60ff00 ;margin-left:-100px;margin-top:-100px;background-color:#60ff00 ;}
</style>
<div class="container">
    <div class="A"></div>
    <div class="B"></div>
    <div class="C"></div>
</div>