Bo góc, đổ bóng cho Internet Explorer 6,7,8 (với htc file)

Việc tạo bo góc, và đổ bóng trên những trình duyệt hiện đại là rất đơn giản với CSS3, nhưng với trình duyệt IE cũ thì không thể làm theo cách thông thường mà cần có một đoạn chương trình thực hiện điều đó. Bài viết này giới thiệu cách sử dụng file htc để thực hiện tạo bo góc và đổ bóng trên trình duyệt IE 6,7,8 với cách áp dụng của CSS3.

Sử dụng

-moz-border-radius: 15px; /* Firefox */
-webkit-border-radius: 15px; /* Safari and Chrome */
border-radius: 15px; /* Opera 10.5+, future browsers, and IE 6+ using IE-CSS3 */

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

behavior: url(ie-css3.htc); /* hack for IE */

Chúng ta hoàn toàn sử dụng thuộc tính CSS3 để thực hiện nhưng bạn cần sử dụng cú pháp behavior với đường dẫn tới file htc.
cách sử dụng là rất đơn giản và file htc cũng rất nhẹ tuy nhiên nó không hoàn toàn hổ trợ CSS3 đầy đủ cụ thể như chúng ta chỉ đổ bóng với một màu đen duy nhất và cũng không bo góc theo các góc tùy ý được mà phải bo cả 4 góc, bạn cũng có thể tạo đổ bóng cho chữ với CSS3 text-shadow nhưng nó cũng hoạt động không tốt.

Để đọc thêm thông tin và tải file htc hãy truy cập địa chỉ http://fetchak.com/ie-css3/ tác giả bổ xung Nick Fetchak, đoạn kịch bản gốc file htc của tác giả Remiz Rahnas trên http://www.htmlremix.com.