css round 익스플로어 (IE6,7,8) 모두적용

CSS3 : border-radius
border-radius 는 박스의 라운드를 가능하게 해준다.
아직 이 방법이 적용 되지 않는 브라우저가 많으며 별도의 지정이 필요하다


.box{ width:600px;height:600px;
border: 10px solid #000;
/*확인을 위해 테두리를줌*/
background:#fff;
/*IE에서는 테두리가 배경색이된다*/
-moz-border-radius: 15px;
/*파이어폭스*/
-webkit-border-radius: 15px;
/*웹킷기반 브라우저 구글크롬 사파리*/
border-radius: 15px;
/* 오페라 10.5이상 */
behavior: url(ie-css3.htc);
/*IE6이상 IE-CSS3 핵사용*/
}
아주간단 html은 다음과 같다

박스내용

주석에서 달아 놓았듯이 테두리만 주면 IE에서는 모두 테두리색으로보인다.
따라서 다시 배경색을 지정 해 줬다.


ie-css3.htc 파일은 http://fetchak.com/ie-css3/ 에서 다운받기를 하면됨.

=======================================================

예제

<style type="text/css">
  .box3 {
   background-color: #ddd;
   width: 110px;
   height: 25px;
   padding: 20px;
   position: absolute;
   top: 1px; left: 1px;
   text-align: center;
   font-weight: bold;

   -moz-border-radius: 15px;
   -webkit-border-radius: 15px;
   border-radius: 15px;

   -moz-box-shadow: 10px 10px 20px #000;
   -webkit-box-shadow: 10px 10px 10px #000;
   box-shadow: 10px 10px 20px #000;

   behavior: url(ie-css3.htc);
  }

</style>

<div class="box3">testest</div>