Hướng dẫn box-shadow css beautiful
Khi thiết kế giao diện web, bạn đủ sức dùng thuộc tính box-shadow cho vùng giao diện nào đó để tăng trưởng hiệu ứng Quan sát trực quan và thẩm mỹ cho trang. tính chất CSS này đều được support ở tất cả trình duyệt website phiên bản mới nhất, vì thế bạn cứ yên tâm sử dụng. Show tính chất box-shadowthuộc tính này dùng để tạo bóng mờ cho một vùng giao diện hay phần tử HTML (thường dạng khối – block). Cú pháp:
Tạo bóng với tham số h-offset, v-offset, blur và colorỞ ví dụ này, chúng ta sẽ tạo bóng mờ và với màu sắc của bóng cũng giống như vị trí xuất hiện của bóng.
Tạo bóng với tham số spreadTham số spread giúp trải rộng kích thước bóng, bạn đủ sức thử thông qua gợi ý sau.
Tạo nhiều bóng 1 lúcỨng với mỗi bóng bạn chỉ cần khái niệm phương pháp nhau dấu phẩy trong tính chất box-shadow. Điều này giúp bạn tạo nhiều bóng, thậm chí tạo được cả hiệu ứng cầu vồng nếu muốn.
Tạo bóng bên trongví dụ này dùng tham số inset dùng để tạo bóng bên trong vùng giao diện thay vì bên ngoài như thông thường.
Tạo bóng cầu vồng trònTrong gợi ý này, bạn sẽ học phương pháp tạo bóng cầu vòng với nhiều màu sắc. gợi ý sử dụng border-radius: 50% để tạo ảnh tròn cho vùng giao diện.
tuy nhiên, thuộc tính box-shadow còn được vận dụng để tạo viền cho pic, album, và các đối tượng không giống để làm giao diện website trực quan. Chúc các bạn thành công nhé! Nguồn: internet.com |