HTML5

 

 

동그라미 안에 숫자 넣기

 

<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>

 

 

about author

PHRASE

Level 60  라이트

태어남이란 한 가락 바람이 일어나는 것이요, 죽음이란 못에 비친 달의 그림자와 같을 뿐이다. 죽고 살고, 가고 옴에 막힘이 없어야 한다. -나옹

댓글 ( 7)

댓글 남기기

작성

HTML5 목록    more