Cách sử dụng CSS box-shadow: 13 Thủ thuật và Ví dụ

Cách sử dụng CSS box-shadow: 13 Thủ thuật và Ví dụ

CSS là ngôn ngữ mà các nhà phát triển sử dụng để tạo kiểu cho một trang web. Nó kiểm soát cách các phần tử HTML được hiển thị trên màn hình, trên giấy hoặc trong bất kỳ hình thức phương tiện nào khác. CSS cung cấp toàn bộ sức mạnh tùy chỉnh để tạo kiểu trang web theo hình ảnh của riêng bạn.





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. Chúng tôi sẽ hướng dẫn bạn một số cách sử dụng hiệu quả của box-shadow trong hướng dẫn này.



CSS box-shadow là gì?

Các bóng hộp thuộc tính đượ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:

box-shadow: [horizontal offset] [vertical offset] [blur radius] [optional spread radius] [color];
  1. bù ngang: Nếu độ lệch ngang là dương, bóng sẽ ở bên phải của hộp. Và nếu độ lệch ngang là âm, thì bóng sẽ ở bên trái của hộp.
  2. Bù đắp theo chiều dọc: Nếu độ lệch dọc là dương, bóng sẽ nằm bên dưới hộp. Và nếu độ lệch dọc là âm, bóng sẽ ở trên hộp.
  3. bán kính mờ: Giá trị càng cao thì bóng mờ càng nhiều.
  4. bán kính lan rộng: Nó cho biết bóng sẽ lan rộng bao nhiêu. Giá trị dương làm tăng độ lan truyền của bóng, giá trị âm làm giảm độ lan truyền.
  5. Màu sắc: Nó biểu thị màu sắc của bóng. Ngoài ra, nó hỗ trợ bất kỳ định dạng màu nào như rgba, hex hoặc hsla.

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ộp

Bạ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:

box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;

Đầu ra:



2. Thêm một hộp bóng mờ cho Tất cả các mặt

Bạ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:



box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;

Đầu ra:

3. Thêm một bóng hộp mỏng vào Mặt dưới và Mặt phải

Bạn có thể thêm bóng đổ vào phía dưới 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:

cách thay đổi trở lại gmail cổ điển
box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;

Đầu ra:

4. Thêm hộp bóng tối cho Tất cả các mặt

Bạn có thể thêm bóng tối 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:

box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;

Đầu ra:

5. Thêm Spread Shadow vào Tất cả các Mặt

Bạ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:

box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;

Đầu ra:

6. Thêm bóng viền mỏng cho tất cả các mặt

Bạ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:

box-shadow: rgba(6, 24, 44, 0.4) 0px 0px 0px 2px, rgba(6, 24, 44, 0.65) 0px 4px 6px -1px, rgba(255, 255, 255, 0.08) 0px 1px 0px inset;

Đầu ra:

7. Thêm bóng hộp vào Mặt dưới và Mặt trái

Bạ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 bạn:

box-shadow: rgba(0, 0, 0, 0.1) -4px 9px 25px -6px;

Đầ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ải

Bạ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 ở 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:

box-shadow: rgba(136, 165, 191, 0.48) 6px 2px 16px 0px, rgba(255, 255, 255, 0.8) -6px -2px 16px 0px;

Đầu ra:

9. Thêm bóng viền mỏng, có màu cho tất cả các mặt

Bạ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 bóng hộp sau với phần tử HTML mục tiêu của bạn:

box-shadow: rgba(3, 102, 214, 0.3) 0px 0px 0px 3px;

Đầu ra:

10. Thêm nhiều bóng viền nhiều màu vào mặt dưới và mặt trái của hộp

Bạ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:

box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;

Đầu ra:

điện thoại sẽ không kết nối với máy tính

11. Thêm nhiều bóng viền nhiều màu vào phần dưới cùng

Bạ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:

box-shadow: rgba(240, 46, 170, 0.4) 0px 5px, rgba(240, 46, 170, 0.3) 0px 10px, rgba(240, 46, 170, 0.2) 0px 15px, rgba(240, 46, 170, 0.1) 0px 20px, rgba(240, 46, 170, 0.05) 0px 25px;

Đầ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ộp

Bạ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:

box-shadow: rgba(240, 46, 170, 0.4) 5px 5px, rgba(240, 46, 170, 0.3) 10px 10px, rgba(240, 46, 170, 0.2) 15px 15px, rgba(240, 46, 170, 0.1) 20px 20px, rgba(240, 46, 170, 0.05) 25px 25px;

Đầ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ùng

Bạ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:

box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;

Đầu ra:

Tích hợp CSS với một trang HTML

Bây giờ bạn đã biết cách thêm các 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.

Có liên quan: 11 Công cụ hữu ích để kiểm tra, làm sạch và tối ưu hóa tệp CSS

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ộ

Các Trang tính Kiểu được Nhúng hoặc Nội bộ được chèn vào của một tài liệu HTML bằng cách sử dụng yếu tố. Bạn có thể tạo bất kỳ số các phần tử trong tài liệu HTML, nhưng chúng phải được đặt giữa và các thẻ. Dưới đây là một ví dụ minh họa cách sử dụng CSS nội bộ với tài liệu HTML:





CSS box-shadow

.heading {
text-align: center;
}
.image-box {
display: block;
margin-left: auto;
margin-right: auto;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}




Style 4





CSS nội tuyến

CSS nội tuyến được sử dụng để thêm các quy tắc kiểu duy nhất vào một phần tử HTML. Nó có thể được sử dụng với một phần tử HTML thông qua Phong cách thuộc tính. Thuộc tính style chứa các thuộc tính CSS ở dạng 'giá trị tài sản' phân tách bằng dấu chấm phẩy ( ; ).

Liên quan: Tìm hiểu cách xây dựng trang web hai chiều với CSS Grid

Tất cả các thuộc tính CSS phải nằm trong một dòng, tức là không được có dấu ngắt dòng giữa các thuộc tính CSS. Dưới đây là một ví dụ minh họa cách sử dụng CSS nội tuyến với tài liệu HTML:





CSS box-shadow



Style 4





CSS bên ngoài

CSS bên ngoài là cách lý tưởng nhất để áp dụng các kiểu cho tài liệu HTML. Biểu định kiểu bên ngoài chứa tất cả các quy tắc kiểu trong một tài liệu riêng biệt (tệp .css), tài liệu này sau đó được liên kết với tài liệu HTML bằng cách sử dụng nhãn. Phương pháp này là phương pháp tốt nhất để xác định và áp dụng kiểu cho tài liệu HTML vì tệp HTML bị ảnh hưởng yêu cầu thay đổi tối thiểu trong đánh dấu. Dưới đây là một ví dụ minh họa cách sử dụng CSS bên ngoài với tài liệu HTML:

Tạo một tệp CSS mới với .css gia hạn. Bây giờ, hãy thêm mã CSS sau vào bên trong tệp đó:

.heading {
text-align: center;
}
.image-box {
display: block;
margin-left: auto;
margin-right: auto;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

Cuối cùng, tạo một tài liệu HTML và thêm mã sau vào bên trong tài liệu đó:

tác động tích cực của mạng xã hội đối với sinh viên




CSS box-shadow




Style 4





Lưu ý rằng tệp CSS được liên kết với tài liệu HTML qua gắn thẻ và href thuộc tính.

Tất cả ba phương pháp trên (CSS nội bộ, CSS nội tuyến và CSS bên ngoài) sẽ hiển thị cùng một đầu ra-

Làm cho trang web của bạn trở nên thanh lịch với CSS

Bằng cách sử dụng CSS, bạn có toàn quyền kiểm soát việc tạo kiểu cho trang web của mình. Bạn có thể tùy chỉnh mọi phần tử HTML bằng cách sử dụng các thuộc tính CSS khác nhau. Các nhà phát triển từ khắp nơi trên thế giới đang đóng góp vào các bản cập nhật CSS và họ đã làm như vậy kể từ khi phát hành vào năm 1996. Vì vậy, người mới bắt đầu có rất nhiều điều để học!

May mắn thay, CSS thân thiện với người mới bắt đầu. Bạn có thể có được một số thực hành tuyệt vời bằng cách bắt đầu với một vài lệnh đơn giản và xem khả năng sáng tạo của bạn sẽ đưa bạn đến đâu.

Đăng lại Đăng lại tiếng riu ríu E-mail 10 ví dụ về mã CSS đơn giản mà bạn có thể học trong 10 phút

Cần trợ giúp với CSS? Hãy thử các ví dụ mã CSS cơ bản này để bắt đầu, sau đó áp dụng chúng cho các trang web của riêng bạn.

Đọc tiếp Chủ đề liên quan
  • Lập trình
  • Thiết kế web
  • CSS
Giới thiệu về tác giả Yuvraj Chandra(60 bài báo đã xuất bản)

Yuvraj là sinh viên ngành Khoa học Máy tính tại Đại học Delhi, Ấn Độ. Anh ấy đam mê Phát triển Web Full Stack. Khi không viết, anh ấy đang khám phá chiều sâu của các công nghệ khác nhau.

Xem thêm từ Yuvraj Chandra

Theo dõi bản tin của chúng tôi

Tham gia bản tin của chúng tôi để biết các mẹo công nghệ, đánh giá, sách điện tử miễn phí và các ưu đãi độc quyền!

Bấm vào đây để đăng ký