CSS3의 border-radius 속성은 코너를 둥글게 해주는 아주 유용한 속성이지만
아직 정식(?)으로 지원하는 브라우저는 없는 것 같고, (있나...-_-)
FF는 -moz-border-radius
Chrome과 Safari는 -webkit-border-radius 라는 속성으로 지원을 하고 있습니다.
역시나... IE는 지원을 안하구요-_-
그런데,
IE에서 이것을 가능하게 해주는 스크립트가 있어서 테스트를 해봤는데 IE6,7,8에서 비교적 잘 작동하네요.
(아래 테스트 페이지의 Quarter Circle은 제대로 안되는것 같음..)
DD_roundies 라는 라이브러리이고,
IE의 VML을 이용해 border-radius 를 구현하게 돼있습니다.
(제작자는 DD_belatedPNG 를 만든 사람이기도 하구요.)
* Test Page : http://aprilbriz.com/_test/border_radius.html
** 테스트 페이지는 아래 링크를 참고했음
ps.
테스트 페이지 제일 아래 Tooltip 에 백그라운드 컬러를 줬더니 IE8 에서는 여백이 생겨버리네요.
DD_roundies 홈페이지에는 IE8은 무지하게 느리다고도 나와있고...
TRACKBACK :: http://aprilbriz.com/trackback/109
-
CSS3로 할 수 있는 것들 - CSS3 Click Chart
: Firejune Blog 2010/02/11 01:16 Delete라운디드 코너, 그림자, 그라디언트, 등의 다채롭고 흥미로운 그래픽 효과를 부여할 수 있는 CSS3는 마법과도 같습니다. Impressive Webs의 Louis Lazaris씨는 CSS3를 이용하여 가능한 예시를 일목요연하게 조회하고 쉽게 응용할 수 있도록 CSS3 Click Chart를 만들었습니다. box-sizing, border-radius, shadows, RGBA colors, multiple columns, HSLA colors...
