Thuộc tính “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+.
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ụ:
- param1: 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.
- param2: 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.
- param3: Độ rộng hay còn gọi là độ dày của bóng đổ.
- color : Màu sắc của phần bóng đổ.
Một vài ví dụ:
Với đoạn code trên thì bóng đổ sẽ lệch sang bên phải và xuống dưới vì param1 và param2 dương.
Box shadow
Đoạn code được sử dụng như sau:
Khi param1 và param2 âm thì chúng ta sẽ được bóng đổ như dưới đây.
Box shadow
Blog Designer
Hãy cho đi rồi sẽ nhận lại nhiều hơn thế
Đã có nhiều lúc tôi không biết mình sẽ làm được gì ??? Nhưng hãy cứ tin vào chính bản thân mình, tin vào mọi người và đừng để con tim bạn lạc lối. Bạn và tôi sẽ tìm ra được đâu là đích đến để mình biết đường đi.Nếu bạn cần một người bạn, đừng ngại kết bạn với tôi.
Thư Viện Đồ Họa: www.izdesigner.com
Kết nối với tôi: