Rev. 2.73

이 고양이 사진은 모서리가 둥글지 않습니다.

IE-CSS3border-radius, box-shadow, text-shadow 속성을 그대로 이어 받아 htc 스크립트를 이용하여 표현해 줍니다. IE의 VML API를 이용하여 CSS3의 비주얼 효과를 표현하는 방법을 사용하기 때문에 CSS3와 동등한 수준의 결과물을 표현합니다. 특히, 속성들을 재작성 할 필요가 없다는 것이 아주 매력적이네요. CSS3를 지원하지 않는 IE(인터넷 익스플로러)에서 트릭을 이용하여 표현하는 방법이 여러가지 있습니다만 그중에서도 가장 괜찮은 솔루션으로 생각됩니다.

.box {
  /* Firefox */
  -moz-border-radius: 15px;
  /* Safari and Chrome */
  -webkit-border-radius: 15px;
  /* Opera 10.5+, future browsers, and now also Internet Explorer 6+ using IE-CSS3 */
  border-radius: 15px;

  /* Firefox */
  -moz-box-shadow: 10px 10px 20px #000;
  /* Safari and Chrome */
  -webkit-box-shadow: 10px 10px 20px #000;
  /* Opera 10.5+, future browsers and IE6+ using IE-CSS3 */
  box-shadow: 10px 10px 20px #000;

  /* This lets IE know to call the script on all elements which get the 'box' class */
  behavior: url(ie-css3.htc);
}

filter 속성을 어줍잖게 사용하는 것 보다 낫군요. 다른 CSS3 속성들도 표현 가능해 지기를 기대합니다.

Comments

Got something to add? You can just leave a comment.

Your Reaction Time!

captcha

avatar