tailieunhanh - Làm 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. | Làm 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 Alpha Chrome Opera và IE 9 . 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ụ 1. yourdiv 2. box-shadow thamsol thamso2 thamso3 mau 3. 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. 2. thamso2 Bóng đổ theo chiều dọc nghĩa là phần bóng đổ sẽ lệch về phía trên của đối tượng. 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ụ 1. yourdiv eee 3. box-shadow 5px 5px 5px 666 4. -moz-box-shadow 5px 5px 5px 666 5. -webkit-box-shadow 5px 5px 5px 666 6. margin-right 5px 7. padding 20px 8. Với đoạn code trên thì bóng đổ sẽ lệch sang bên phải và xuống dưới vì thamsol và thamso2 dương. Box shadow 1. yourdiv 2. background eee 3. box-shadow -5px -5px 5px 666 4. -moz-box-shadow -5px -5px 5px 666 5. -webkit-box-shadow -5px -5px 5px 666 6. margin-right 5px 7. padding 20px 8. Khi thamsol và thamso2 âm thì chúng ta sẽ được bóng đổ như dưới đây. Box .