Bản mẫu:Box-shadow/doc

Bản mẫu này là một phím tắt để tạo bóng. Nó tạo CSS cho các trình duyệt khác nhau. Các trình duyệt được hỗ trợ là các phiên bản hiện tại của Opera, Firefox, Safari, Chrome và Internet Explorer.

Sử dụng

Chèn bản mẫu này trong thẻ kiểu của bất kỳ yếu tố nào:

{{box-shadow | X-offset | Y-offset | blur radius | #color}}

• X-offset và Y-offset – Chỉ định phần bù của bóng ở bên phải và bên dưới phần tử. Sử dụng các giá trị âm cho một bóng ở bên trái và phía trên. Mặc định là 4px.
• blur radius – Chỉ định chiều rộng làm mờ được thêm vào viền bóng. Mặc định là 4px.
• color – Chỉ định màu của bóng. Mã màu mặc định là #CCC;.

Ví dụ

• <div style="background-color: #FFFFDD; border: 1px solid #808000; padding: 5px; {{box-shadow}}">Lorem ipsum...</div> sẽ tạo ra một hộp có bóng viền mặc định:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

• <div style="background-color: #FFFFDD; border: 1px solid #808000; padding: 5px; {{box-shadow|4px|4px|8px|#A0A080}}">Lorem ipsum...</div> sẽ tạo ra một bóng rõ rệt hơn và có màu:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Xem thêm

• {{border-radius}}
• {{linear-gradient}}