THUỘC TÍNH BOX-SHADOW TRONG CSS3

được viết bởi Nguyễn Đức Anh 8 November, 2013

Box-shadow là thuộc tính mới trong CSS, nằm trong phiên bản CSS3. Nó có tác dụng tạo bóng cho hộp (xem thêm mô hình hộp trong CSS).

Ví dụ:

div

{width:300px;

height:150px;

background-color:red;

box-shadow: 20px 10px;

}

 

Kết quả:

Khi sử dụng box-shadow có một số lưu ý sau:

• Bóng là một hộp có kích thước tương tự hộp ban đầu
• Màu sắc mặc định của bóng là đen (mã màu: #000000)
• box-shadow: 20px 10px; quy định độ dịch chuyển của bóng so với vị trí gốc, theo đó giá trị đầu là dịch chuyển theo chiều ngang (20px), giá trị tiếp theo là dọc (10px).

Bạn có thể đặt giá trị âm cho độ dịch chuyển, ví dụ:

div

{width:300px;

height:150px;

background-color:red;

box-shadow: 20px -10px;

}

Kết quả:

Tạo độ mờ cho bóng

Đã là bóng thì nó thường mờ (blur) hơn vật chủ, để bổ sung độ mờ cho bóng, ta thêm giá trị nữa đằng sau, ví dụ:

div

{width:300px;

height:150px;

background-color:red;

box-shadow: 20px 10px 10px;

}

Kết quả:

Thay đổi độ lớn của bóng

Để thay đổi độ lớn của bóng, bạn thêm tiếp giá trị vào đằng sau độ mờ, ví dụ:

div

{width:300px;

height:150px;

background-color:red;

box-shadow: 30px 20px 10px -10px;

}

Kết quả:

Với giá trị -10px; kích thước bóng sẽ giảm đi 10px cả 2 chiều so với kích thước gốc, nghĩa là lúc này, bóng rộng 290px = 300px – 10px và cao 140px = 150px – 10px;

Thay đổi màu cho bóng

Để quy định màu cho bóng, bạn thêm mã màu vào (xem thêm: cách khai báo màu sắc trong CSS), nó nằm ở vị trí cuối cùng, code mẫu:

div

{width:300px;

height:150px;

background-color:red;

box-shadow: 30px 20px 10px -10px gray;

}

Kết quả là bóng sẽ có màu xám:

Bóng đổ ngay bên trong hộp

Từ nãy đến giờ chúng ta vẫn chỉ thực hành với bóng bên ngoài hộp, nhưng bóng không phải lúc nào cũng ở bên ngoài, đôi khi ngay bên trong hộp cũng có bóng, để làm điều này, ta dùng giá trị inset:

div

{width:300px;

height:150px;

background-color:red;

box-shadow: 30px 20px 10px -10px pink inset;

}

Kết quả:

Một vài kết quả khác:

Cũng là đổ bóng, nhưng dành cho văn bản, bạn dùng thuộc tính text-shadow.

Điều gì xẩy ra khi đổ bóng cho hình tròn

Bài viết liên quan:

• Tweet
• Share
• Share
• Share
• Share