CSS 원만들기

css로 원만들기

지난 포스팅한 border-radius로 원을 만들수 있다.
width,height의 값의 /2의 값이 border-radius의 값이 된다.
width,height의 값이 100px이면 border-radius의 값은 50px

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