CSS Shadows
Summary
box-shadow: 5px 5px 20px 5px #000;
- Horizontal/Vertical offset/ Blur radius/ Spread radius/ Color
text-shadow: 3px 3px 3px hotpink
- Giống box shadow nhưng không có spread.
- Có thể set multiple box shadow
Shadow
Box Shadow
- Box Shadow: adding shadows to the box of an HTML element. It works on block elements and inline elements.
box-shadow: 5px 5px 20px 5px #000;
- Horizontal offset: Số dương thì push bóng về bên trái, số âm thì push về bên phải
- Vertical offset: Số dương thì push bóng về top, số âm push về phía bottom
- Blur radius: Số càng lớn thì border càng bị blur nhiều.
- Spread radius: Số lớn thì tăng size của bóng, số nhỏ thì giảm sai
- Color: Màu của shadow
- Multiple shadow: Có thể set nhiều shadow cho cùng 1 element
- Border radius có thể ảnh hưởng tới shadow. Nếu không muốn hiển thị shadow thì có thể set
overflow: hidden
cho phần tử cha bao ngoài.
Text Shadow
text-shadow: 3px 3px 3px hotpink
- Tham số giống box shadow nhưng không có Spread
Drop shadow