Đổ bóng với thuộc tính box-shadow của CSS3

Thuộc tính mới "box-shadow" của CSS3 là một trong những thuộc tính khá hữu dụng và được sử dụng nhiều trong quá trình viết CSS. Với thuộc tính này bạn có thể tạo cho các thành phần trong website của mình hiệu ứng bóng đổ đẹp mắt. Tuy nhiên thuộc tính này không được hỗ trợ trên toàn bộ các trình duyệt hiện tại, thuộc tính này chỉ được hỗ trợ từ Safari 3+, Firefox 3.1 (Alpha), Chrome, Opera và IE 9+....
Nội dung trích xuất từ tài liệu:
Đổ bóng với thuộc tính box-shadow của CSS3 Đổ bóng với thuộc tính box-shadow của CSS3Thuộc tính mới box-shadow của CSS3 là một trong những thuộc tính khá hữudụng và được sử dụng nhiều trong quá trình viết CSS. Với thuộc tính này bạn cóthể tạo cho các thành phần trong website của mình hiệu ứng bóng đổ đẹp mắt. Tuynhiên thuộc tính này không được hỗ trợ trên toàn bộ các trình duyệt hiện tại, thuộctính này chỉ được hỗ trợ từ Safari 3+, Firefox 3.1 (Alpha), Chrome, Opera và IE9+.Tùy theo ý tưởng của mình mà các bạn có thể điều chỉnh thông số sao cho phù hợpđể có được hiệu ứng đẹp mắt như mong muốn.Khi làm việc với thuộc tính này thì các bạn cần chú ý 3 thông số chính như sau:Ví dụ:#yourdiv {box-shadow: thamso1, thamso2, thamso3, mau;} 1. thamso1: Bóng đổ theo chiều ngang, nghĩa là phần bóng đổ sẽ lệch về phía phải của đối tượng. (giá trị dương thì lệch sang phải, giá trị âm lệch sang trái) 2. thamso2: Bóng đổ theo chiều dọc, nghĩa là phần bóng đổ sẽ lệch về phía dưới của đối tượng. (giá trị dương thì lệch xuống dưới, giá trị âm lệch lên trên) 3. thamso3: Độ rộng hay còn gọi là độ dày của bóng đổ. 4. màu: Màu sắc của phần bóng đổ.Một vài ví dụ:#yourdiv {background: #eee;box-shadow: 5px 5px 5px #666;-moz-box-shadow: 5px 5px 5px #666;-webkit-box-shadow: 5px 5px 5px #666;margin-right: 5px;padding: 20px;}Với đoạn code trên thì bóng đổ sẽ lệch sang bên phải và xuống dưới vì thamso1 vàthamso2 dương.view sourceprint?#yourdiv {background: #eee;box-shadow: -5px -5px 5px #666;-moz-box-shadow: -5px -5px 5px #666;-webkit-box-shadow: -5px -5px 5px #666;margin-right: 5px;padding: 20px;}Khi thamso1 và thamso2 âm thì chúng ta sẽ được bóng đổ như dưới đây.Chú ý:Các trình duyệt hộ trợ thuộc tính này Opera và IE9 trở lên: box-shadow  Firefox thêm tiền tố -moz-: -moz-box-shadow Các trình duyệt WebKit-based (Google Chrome và Apple Safari) thêm tiền tố -webkit-: -webkit-box-shadow IE8 trở về trước không hỗ trợ.