Hướng dẫn Cách làm Internet Explorer 6,7,8 bo góc, đổ bóng

PVS

Super Moderator
Thành viên BQT
Tham gia
28/02/2015
Bài viết
16,956
Được Like
12,726
Cách làm Internet Explorer 6,7,8 bo góc, đổ bóng

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 sẽ 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
Mã:
-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ổ sung 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.

Chúc các bạn thành công.


Nguồn: sothichweb.com​
 

Top Bottom