CSS3 라운드박스 익스플로어 (IE6,7,8) 모두적용

CSS/CSS3 2010.07.07 00:14

CSS3 라운드박스 익스플로어 (IE6,7,8) 모두적용

CSS3적용에 여전히 문제점을 가지는 IE ......에 라운딩박스의 경우여러가지방법이있다. 그 중 괜찮은것

출처는 여기 http://www.htmlremix.com/css/css-level-3-styles-in-internet-explorer-6-onwards

데모는 여기서 바로 확인 가능 http://fetchak.com/ie-css3/

다른 방법들에 비해 쉽다. ie-css3.htc 이 파일이필요 다운은 http://code.google.com/p/curved-corner/

소스를 알아보자

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은 다음과 같다


<div class="box"><p>박스내용</p></div>

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

위소스의결과를 확인: http://sianasiatiger.cafe24.com/study/CSS3_RBox.html


설정

트랙백

댓글

  • 달타니 2011.01.11 16:10 ADDR 수정/삭제 답글

    방금 로컬에서 테스트해봤는데.. 안되네요.. 로컬에선 확인 할수 없나요??

    • 나그네 2011.01.14 12:09 수정/삭제

      htc 파일이 필요하다는데요. 윗글에 링크주소가 있어요.

  • 일꺾 2012.09.09 19:34 ADDR 수정/삭제 답글

    위에 링크로 받은 htc 파일로는 해결이 안되서

    http://fetchak.com/ie-css3/ 여기서 받아서 해결했습니다

  • 창민 2014.05.20 16:46 ADDR 수정/삭제 답글

    좋은 정보 감사합니다.