동그라미 안에 숫자 넣기

 

<style type="text/css">
.circle1 {
 width:200px;
 height:200px;
 border-radius:100px;
 -moz-border-radius : 100px;
 -webkit-border-radius : 100px;
 -ms-border-radius :100px;
 -khtml-border-radius : 100px;
 -o-border-radius :100px;
 background:#09F;
 font:normal 12px/200px "나눔고딕", "돋움", "굴림";
 color:#fff;
 text-align:center;
}
.circle2 {
 width:100px;
 height:100px;
 border-radius:50px;
 -moz-border-radius : 50px;
 -webkit-border-radius : 50px;
 -ms-border-radius :50px;
 -khtml-border-radius : 50px;
 -o-border-radius :50px;
 background:#FF9;
 font:normal 12px/100px "나눔고딕", "돋움", "굴림";
 color:#222;
 text-align:center;
}
.circle3 {
 width:50px;
 height:50px;
 border-radius:25px;
 -moz-border-radius : 25px;
 -webkit-border-radius : 25px;
 -ms-border-radius :25px;
 -khtml-border-radius : 25px;
 -o-border-radius :25px;
 background:#66F;
 font:normal 11px/50px "나눔고딕", "돋움", "굴림";
 color:#fff;
 text-align:center;
}
</style>


<div class="circle1">
 원1
</div>
<div class="circle2">
 원2
</div>
<div class="circle3">
원3
</div>