Hướng dẫn box-shadow css examples
Show
box-shadow là gì?
Cấu trúctag {
box-shadow: h-offset v-offset blur spread color optional;
}box-shadow có tất cả 5 giá trị chính, lần lượt điều khiển shadow dịch chuyển theo chiều ngang (
Cách sử dụngHTML viết:
CSS viết - khi chưa sử dụng div {
border: 3px solid #ffcccc;
height: 100px;
line-height: 100px;
margin: 30px;
text-align: center;
width: 200px;
}Hiển thị trình duyệt: Bây giờ ta sẽ sử dụng CSS viết: div {
border: 3px solid #ffcccc;
box-shadow: 0px 0px 5px 5px #999999;
height: 100px;
line-height: 100px;
text-align: center;
width: 200px;
}Hiển thị trình duyệt: Với cách viết như trên, ta thấy shadow đã được tạo một cách dễ dàng với 1 dòng lệnh, ta có thể điều chỉnh
Hiển thị trình duyệt: điều chỉnh shadow theo chiều ngang: div {
border: 3px solid #ffcccc;
box-shadow: 10px 0px 5px 5px #999999;
height: 100px;
line-height: 100px;
text-align: center;
width: 200px;
}Hiển thị trình duyệt: điều chỉnh shadow theo chiều dọc div {
border: 3px solid #ffcccc;
box-shadow: 0px 10px 5px 5px #999999;
height: 100px;
line-height: 100px;
text-align: center;
width: 200px;
}
div {
border: 3px solid #ffcccc;
box-shadow: box-shadow: 0px -1px 5px 3px #999 inset;
height: 100px;
line-height: 100px;
text-align: center;
width: 200px;
}Ví dụ thêm - Một số box-shadow thường dùngShadow nhạt div {
border: 3px solid #ffcccc;
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
height: 100px;
line-height: 100px;
text-align: center;
width: 200px;
}Shadow đậm div {
border: 3px solid #ffcccc;
box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.6);
height: 100px;
line-height: 100px;
text-align: center;
width: 200px;
}Shadow bên dưới gần div {
border: 3px solid #ffcccc;
box-shadow: 0 4px 2px -3px;
height: 100px;
line-height: 100px;
text-align: center;
width: 200px;
}Shadow bên dưới xa div {
border: 3px solid #ffcccc;
box-shadow: 0px 10px 6px -6px #999999;
height: 100px;
line-height: 100px;
text-align: center;
width: 200px;
}Tới đây chắc các bạn đã biết cách dùng Bạn có thể thay đổi màu nền, kiểu phông chữ, màu phông chữ, bóng hộp, lề và nhiều thuộc tính khác của một phần tử bằng cách sử dụng CSS. Trong bài viết dưới đây, FUNiX sẽ hướng dẫn bạn một số cách sử dụng hiệu quả của box-shadow (bóng hộp). CSS box-shadow là gì?Thuộc tính box-shadow được sử dụng để áp dụng bóng cho các phần tử HTML. Đây là một trong những thuộc tính CSS được sử dụng nhiều nhất để tạo kiểu cho các hộp hoặc hình ảnh. Cú pháp CSS:
Các thông số về độ mờ, độ lan rộng và màu sắc là tùy chọn. Phần thú vị nhất của box-shadow là bạn có thể sử dụng dấu phẩy để phân tách các giá trị box-shadow bất kỳ lúc nào. Điều này có thể được sử dụng để tạo nhiều đường viền và bóng trên các phần tử. 1. Thêm bóng hộp Dim vào Trái, Phải và Dưới cùng của HộpBạn có thể thêm bóng mờ vào ba mặt (trái, phải và dưới cùng) của hộp bằng cách sử dụng CSS bóng hộp sau với phần tử HTML mục tiêu của bạn: Đầu ra: 2. Thêm một hộp bóng mờ cho Tất cả các mặtBạn có thể thêm bóng sáng vào tất cả các mặt của hộp bằng cách sử dụng CSS tạo bóng hộp sau với phần tử HTML mục tiêu của bạn: Đầu ra: 3. Thêm một bóng hộp mỏng vào Mặt dưới và Mặt phảiBạn có thể thêm bóng vào dưới cùng và bên phải của hộp bằng cách sử dụng CSS tạo bóng hộp sau với phần tử HTML mục tiêu của bạn: Đầu ra: 4. Thêm một hộp bóng tối cho Tất cả các mặtBạn có thể thêm bóng tối cho tất cả các mặt của hộp bằng cách sử dụng CSS tạo bóng hộp sau với phần tử HTML mục tiêu của bạn: Đầu ra: 5. Thêm Spread Shadow vào Tất cả các MặtBạn có thể thêm bóng trải rộng vào tất cả các mặt của hộp bằng cách sử dụng lệnh sau với phần tử HTML mục tiêu của bạn: Đầu ra: 6. Thêm bóng viền mỏng cho tất cả các mặtBạn có thể thêm bóng đường viền đơn giản vào tất cả các mặt của hộp bằng cách sử dụng CSS sau với phần tử HTML mục tiêu của bạn: Đầu ra: 7. Thêm một bóng hộp vào Mặt dưới và Mặt tráiBạn có thể thêm bóng đổ vào bên dưới và bên trái của hộp bằng cách sử dụng CSS tạo bóng hộp sau với phần tử HTML mục tiêu của mình: Đầu ra: 8. Thêm bóng hộp Dim vào Mặt trên và Mặt trái, Bóng tối vào Mặt dưới và Mặt phảiBạn có thể thêm bóng sáng vào phía trên và bên trái của hộp cũng như bóng tối vào phía dưới và bên phải của hộp bằng cách sử dụng CSS sau với phần tử HTML mục tiêu của bạn: Đầu ra: 9. Thêm bóng viền mỏng, có màu cho tất cả các mặtBạn có thể thêm bóng đường viền màu đơn giản vào tất cả các mặt của hộp bằng cách sử dụng CSS tạo bóng hộp sau với phần tử HTML mục tiêu của bạn: Đầu ra: 10. Thêm nhiều bóng viền nhiều màu vào các mặt dưới cùng và bên trái của hộpBạn có thể thêm nhiều bóng đường viền màu vào bên dưới và bên trái của hộp bằng cách sử dụng CSS sau với phần tử HTML mục tiêu của bạn: Đầu ra:
11. Thêm nhiều bóng viền nhiều màu vào phần dưới cùngBạn có thể thêm nhiều bóng đường viền màu vào cuối hộp bằng cách sử dụng CSS tạo bóng hộp sau với phần tử HTML mục tiêu của bạn: Đầu ra: 12. Thêm nhiều bóng viền nhiều màu vào phần dưới cùng và bên phải của hộpBạn có thể thêm nhiều bóng đường viền màu vào bên dưới và bên phải của hộp bằng cách sử dụng CSS sau với phần tử HTML mục tiêu của bạn: Đầu ra:
13. Thêm bóng sáng vào hai bên trái và phải, rải bóng xuống dưới cùngBạn có thể thêm bóng sáng vào bên trái và bên phải và trải bóng xuống dưới cùng của hộp bằng cách sử dụng CSS tạo bóng hộp sau với phần tử HTML mục tiêu của bạn: Đầu ra:
Tích hợp CSS với một trang HTMLBây giờ bạn đã biết cách thêm hiệu ứng bóng hộp thú vị bằng cách sử dụng CSS, bạn có thể dễ dàng tích hợp chúng với các phần tử HTML theo nhiều cách. Bạn có thể nhúng nó vào chính trang HTML hoặc đính kèm nó dưới dạng một tài liệu riêng biệt. Có ba cách để đưa CSS vào tài liệu HTML: CSS nội bộBảng kiểu nhúng hoặc Bảng kiểu nội bộ được chèn trong phần của tài liệu HTML bằng cách sử dụng phần tử |