Rate this post

Thuộc tính CSS box-shadow thêm hiệu ứng đổ shadow xung quanh khung của phần tử. Bạn có thể đặt nhiều hiệu ứng được phân tách bằng dấu phẩy. box shadow được mô tả bằng hiệu số X và Y so với phần tử, độ mờ và bán kính trải rộng và màu sắc.

Thuộc tính box-shadow cho phép bạn tạo box shadow từ khung của hầu hết mọi phần tử. Nếu border-radius được chỉ định trên phần tử có box shadow, box shadow sẽ có cùng các góc tròn. Thứ tự z của nhiều box shadow cũng giống như nhiều shadow văn bản (shadow được chỉ định đầu tiên nằm trên cùng).

Tóm tắt nội dung

Giới thiệu về Box shadow

Trong CSS, thuộc tính Box shadow được sử dụng để thêm hiệu ứng đổ bóng cho các phần tử HTML. Đây là một thuộc tính mạnh mẽ cho phép bạn tạo ra hiệu ứng đồ họa ấn tượng và tăng tính tương phản của các phần tử trên trang web.

Box shadow cho phép bạn tạo ra các hiệu ứng đổ bóng với nhiều yếu tố khác nhau như màu sắc, độ mờ (blur), độ sắc nét (spread), và vị trí của đổ bóng. Bằng cách sử dụng các giá trị khác nhau cho các yếu tố này, bạn có thể tạo ra các hiệu ứng đổ bóng đa dạng và tạo sự chú ý cho các phần tử trên trang web.

Cú pháp cơ bản của thuộc tính Box shadow trong CSS như sau:

box-shadow: horizontal-offset vertical-offset blur spread color;

horizontal-offset: Định nghĩa độ lệch theo chiều ngang của đổ bóng. Giá trị âm sẽ đẩy đổ bóng về bên trái, trong khi giá trị dương sẽ đẩy đổ bóng về bên phải.
vertical-offset: Định nghĩa độ lệch theo chiều dọc của đổ bóng. Giá trị âm sẽ đẩy đổ bóng lên, trong khi giá trị dương sẽ đẩy đổ bóng xuống.
blur: Định nghĩa độ mờ của đổ bóng. Giá trị càng cao thì đổ bóng càng mờ.
spread: Định nghĩa độ mở rộng hoặc thu hẹp của đổ bóng. Giá trị dương sẽ làm mở rộng đổ bóng, trong khi giá trị âm sẽ làm thu hẹp đổ bóng.
color: Định nghĩa màu sắc của đổ bóng.

Với thuộc tính Box shadow, bạn có thể tạo ra các hiệu ứng đổ bóng đơn giản như đổ bóng phẳng hoặc tạo hiệu ứng chồng chéo, tạo sự sâu và gây ấn tượng cho các phần tử trên trang web.

Chỉ định một box shadow duy nhất bằng cách sử dụng:

Hai, ba hoặc bốn giá trị <length>.
Nếu chỉ có hai giá trị được đưa ra, chúng được hiểu là các giá trị <offset-x> và <offset-y>.
Nếu giá trị thứ ba được đưa ra, nó được hiểu là <blur-radius>.
Nếu giá trị thứ tư được đưa ra, nó được hiểu là <spread-radius>.
Tùy chọn, từ khóa inset.
Tùy chọn, một giá trị <color>.

Để chỉ định nhiều shadow, hãy cung cấp danh sách các shadow được phân tách bằng dấu phẩy.

Cú pháp của Box shadow

Cú pháp của thuộc tính Box shadow trong CSS có dạng như sau:

box-shadow: [horizontal-offset] [vertical-offset] [blur-radius] [spread-radius] [color];

Trong đó:

[horizontal-offset] là giá trị độ lệch theo chiều ngang của đổ bóng. Giá trị âm sẽ đẩy đổ bóng về phía trái, và giá trị dương sẽ đẩy đổ bóng về phía phải.
[vertical-offset] là giá trị độ lệch theo chiều dọc của đổ bóng. Giá trị âm sẽ đẩy đổ bóng lên trên, và giá trị dương sẽ đẩy đổ bóng xuống dưới.
[blur-radius] là giá trị độ mờ của đổ bóng. Giá trị càng lớn thì đổ bóng càng mờ đi.
[spread-radius] là giá trị mở rộng hoặc thu hẹp của đổ bóng. Giá trị dương sẽ làm mở rộng đổ bóng, và giá trị âm sẽ làm thu hẹp đổ bóng.
[color] là màu sắc của đổ bóng. Bạn có thể sử dụng các giá trị màu CSS như tên màu, mã hex hoặc RGBA.

Ví dụ về cú pháp Box shadow:

.box {
  box-shadow: 2px 2px 4px 1px rgba(0, 0, 0, 0.2);
}

Trong ví dụ trên, đổ bóng được áp dụng cho phần tử có lớp (class) “box”. Đổ bóng có độ lệch 2px theo chiều ngang, 2px theo chiều dọc, độ mờ là 4px, mở rộng 1px và màu sắc là rgba(0, 0, 0, 0.2) (màu đen có độ trong suốt 0.2).

Bằng cách điều chỉnh các giá trị trong cú pháp Box shadow, bạn có thể tạo ra các hiệu ứng đổ bóng đa dạng và tùy chỉnh theo ý muốn.

Làm cách nào để tạo một box shadow trong CSS?

Để tạo một box shadow trong CSS, bạn sử dụng thuộc tính “box-shadow”. Cú pháp cơ bản như sau:

box-shadow: horizontal_offset vertical_offset blur_radius spread_radius color;

horizontal_offset: Độ dời theo chiều ngang của bóng. Nếu giá trị là dương, bóng sẽ được dời sang phải. Nếu giá trị là âm, bóng sẽ được dời sang trái.
vertical_offset: Độ dời theo chiều dọc của bóng. Nếu giá trị là dương, bóng sẽ được dời xuống dưới. Nếu giá trị là âm, bóng sẽ được dời lên trên.
blur_radius: Bán kính phạm vi mờ của bóng. Độ lớn hơn của giá trị này sẽ làm cho bóng trở nên mờ hơn.
spread_radius: Bán kính mở rộng của bóng. Nếu giá trị là dương, bóng sẽ mở rộng ra. Nếu giá trị là âm, bóng sẽ co lại.
color: Màu sắc của bóng. Bạn có thể chỉ định màu sắc bằng tên, mã màu hoặc dạng RGBA.

Ví dụ:

.element {
  box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.75);
}

Thuộc Tính Box-shadow CSS với Giá Trị Ngang và Dọc:

/* Bóng với giá trị ngang và dọc dương */
p {
  background: #aabbcc;
  border: 8px solid #ff9900;
  height: 120px;
  width: 180px;
}

/* Bóng với giá trị ngang và dọc âm */
p {
  background: #aabbcc;
  border: 8px solid #ff9900;
  height: 120px;
  width: 180px;
  box-shadow: -15px -15px;
  -moz-box-shadow: -15px -15px;
  -webkit-box-shadow: -15px -15px;
  -o-box-shadow: -15px -15px;
  -ms-box-shadow: -15px -15px;
}

Thuộc Tính Box-shadow CSS với Giá Trị Độ Mờ (Blur)

/* Bóng với giá trị độ mờ */
p {
  background: #aabbcc;
  border: 8px solid #ff9900;
  height: 120px;
  width: 180px;
  box-shadow: 20px 20px 15px;
  -moz-box-shadow: 20px 20px 15px;
  -webkit-box-shadow: 20px 20px 15px;
  -o-box-shadow: 20px 20px 15px;
  -ms-box-shadow: 20px 20px 15px;
}

/* Tăng thêm giá trị độ mờ */
p {
  background: #aabbcc;
  border: 8px solid #ff9900;
  height: 120px;
  width: 180px;
  box-shadow: 20px 20px 30px;
  -moz-box-shadow: 20px 20px 30px;
  -webkit-box-shadow: 20px 20px 30px;
  -o-box-shadow: 20px 20px 30px;
  -ms-box-shadow: 20px 20px 30px;
}

Bạn có thể tự do thay đổi các giá trị khác nhau để phù hợp với yêu cầu thiết kế của bạn.

Giá trị Value của box-shadow

inset

Nếu không được chỉ định (mặc định), box shadow được giả định là box shadow (như thể hộp được nâng lên trên nội dung). Sự hiện diện của từ khóa inset sẽ thay đổi box shadow thành một shadow bên trong khung (như thể nội dung bị giảm xuống bên trong hộp). shadow chèn được vẽ bên trong đường viền (thậm chí cả những shadow trong suốt), phía trên nền, nhưng bên dưới nội dung.

<offset-x> <offset-y>

Đây là hai giá trị <length> để đặt độ lệch shadow. <offset-x> chỉ định khoảng cách ngang. Giá trị âm đặt shadow ở bên trái của phần tử. <offset-y> chỉ định khoảng cách dọc. Giá trị âm đặt shadow bên trên phần tử. Xem <length> để biết các đơn vị khả thi. Nếu cả hai giá trị đều là 0, thì shadow sẽ được đặt phía sau phần tử (và có thể tạo ra hiệu ứng mờ nếu đặt <blur-radius> và / hoặc <spread-radius>).

<blur-radius>

Đây là giá trị <length> thứ ba. Giá trị này càng lớn thì độ mờ càng lớn, do đó shadow trở nên lớn hơn và nhẹ hơn. Giá trị âm không được phép. Nếu không được chỉ định, nó sẽ là 0 (cạnh của shadow là sắc nét). Đặc điểm kỹ thuật không bao gồm một thuật toán chính xác về cách tính bán kính mờ, tuy nhiên, nó giải thích chi tiết như sau:

… Đối với cạnh shadow dài và thẳng, điều này sẽ tạo ra sự chuyển đổi màu bằng độ dài của khoảng cách làm mờ vuông góc với và tập trung vào cạnh của shadow và phạm vi từ màu shadow đầy đủ tại điểm cuối bán kính bên trong shadow tối sang hoàn toàn trong suốt ở điểm cuối bên ngoài nó.

<spread-radius>

Đây là giá trị <length> thứ tư. Các giá trị dương sẽ làm cho box shadow rộng ra và lớn hơn, các giá trị âm sẽ làm cho box shadow nhỏ lại. Nếu không được chỉ định, nó sẽ là 0 (shadow sẽ có cùng kích thước với phần tử).

<color>

Xem các giá trị <color> để biết các từ khóa và ký hiệu có thể có. Nếu không được chỉ định, nó sẽ mặc định là màu hiện tại.

Ví dụ:

element {
	width: 300px;	height: 100px;	background-color: #FFFFFF;	position: relative;	box-shadow: 5px -5px 5px 0px #895A2C;
}

Cách tùy chỉnh Box shadow

Để tùy chỉnh Box shadow trong CSS, bạn có thể thay đổi các giá trị trong thuộc tính box-shadow để đạt được hiệu ứng đổ bóng mong muốn. Dưới đây là một số cách tùy chỉnh Box shadow:

Đổi màu sắc của đổ bóng:.box { box-shadow: 2px 2px 4px 1px #ff0000; } Trong ví dụ trên, đổ bóng có màu sắc là đỏ (#ff0000).
Đổi độ lệch theo chiều ngang và chiều dọc:.box { box-shadow: 4px 0px 4px 2px rgba(0, 0, 0, 0.2); } Trong ví dụ trên, đổ bóng có độ lệch 4px theo chiều ngang và 0px theo chiều dọc.
Đổi độ mờ của đổ bóng:.box { box-shadow: 2px 2px 10px 1px rgba(0, 0, 0, 0.5); } Trong ví dụ trên, đổ bóng có độ mờ là 10px.
Đổi độ mở rộng hoặc thu hẹp của đổ bóng:.box { box-shadow: 2px 2px 4px 10px rgba(0, 0, 0, 0.2); } Trong ví dụ trên, đổ bóng được mở rộng 10px.
Kết hợp nhiều hiệu ứng đổ bóng:.box { box-shadow: 2px 2px 4px 1px rgba(0, 0, 0, 0.2), -2px -2px 4px 1px rgba(255, 0, 0, 0.2); } Trong ví dụ trên, đổ bóng được áp dụng hai hiệu ứng đổ bóng, một với màu đen và một với màu đỏ.

Bằng cách thay đổi các giá trị trong thuộc tính box-shadow và kết hợp nhiều hiệu ứng, bạn có thể tạo ra các hiệu ứng đổ bóng phức tạp và tùy chỉnh theo ý muốn. Hãy thử nghiệm và tinh chỉnh các giá trị để tạo ra hiệu ứng đổ bóng phù hợp với thiết kế của bạn.

Câu hỏi về Box Shadow

Bạn có thể sử dụng nhiều box shadow cho một phần tử trong CSS không?

Có, bạn có thể sử dụng nhiều box shadow cho một phần tử trong CSS. Bạn có thể tạo bằng cách sử dụng nhiều dòng của thuộc tính box-shadow trong một phần tử CSS. Mỗi dòng sẽ tạo ra một box shadow khác nhau và sẽ được vẽ lên trên nhau để tạo nên một box shadow đa tầng.

Box shadow có thể chỉ định màu sắc không?

Có, bạn có thể chỉ định màu sắc cho box shadow trong CSS bằng cách sử dụng tham số màu sắc trong thuộc tính box-shadow. Màu sắc có thể được xác định bằng mã màu HEX, RGB hoặc mã màu tên. Ví dụ:

box-shadow: 2px 2px 5px #333;

Trong ví dụ trên, màu sắc được chỉ định là #333, tức là màu tối.

Làm cách nào để thay đổi độ sâu của một box shadow?

Bạn có thể thay đổi độ sâu của một box shadow bằng cách thay đổi giá trị của tham số thứ 4 (tham số blur) trong thuộc tính box-shadow. Giá trị này xác định khoảng cách giữa bề mặt của phần tử và mức độ mờ dần của shadow. Giá trị lớn hơn sẽ tạo ra một shadow có độ sâu lớn hơn.

Ví dụ:

box-shadow: 2px 2px 10px #333;

Trong ví dụ trên, tham số thứ 4 là 10px, tức là độ sâu của shadow sẽ lớn hơn so với một ví dụ với giá trị nhỏ hơn.

Có thể tạo một box shadow cho một phần tử trong một góc nào đó không?

Có, bạn có thể tạo một box shadow cho một phần tử theo một góc nào đó bằng cách sử dụng tham số thứ 5 (giá trị spread) trong thuộc tính box-shadow. Giá trị này cho phép bạn xác định khoảng cách từ bề mặt của phần tử tới shadow và kích thước của shadow. Giá trị âm sẽ tạo ra một shadow rớt về trong, còn giá trị dương sẽ tạo ra một shadow mở ra ra ngoài.

Ví dụ:

box-shadow: 2px 2px 10px #333;

Trong ví dụ trên, shadow sẽ xuất hiện trực tiếp bên dưới và bên phải của phần tử, với độ sâu là 10px.

Có thể tạo một box shadow cho một phần tử dạng tròn không?

Có, bạn có thể tạo một box shadow cho một phần tử dạng tròn bằng cách sử dụng thuộc tính border-radius trong CSS. Bạn có thể chỉ định giá trị border-radius tương ứng với bán kính của phần tử để tạo ra một phần tử dạng tròn. Sau đó, bạn có thể sử dụng thuộc tính box-shadow để tạo một shadow cho phần tử này.

Làm cách nào để tạo một box shadow cho một phần tử có một đường viền không?

Bạn có thể tạo một box shadow cho một phần tử có một đường viền bằng cách sử dụng thuộc tính box-shadow trong CSS.

Xem thêm Text-shadow trong CSS

Kết luận

Mỗi shadow trong danh sách (coi không có shadow nào là danh sách có độ dài 0) được inset thông qua thành phần màu (dưới dạng màu) và các thành phần x, y, mờ và (khi thích hợp) trải rộng (theo độ dài).

Đối với mỗi box shadow, nếu cả hai shadow đầu vào có hoặc không được chèn vào, thì shadow inset phải khớp với các shadow đầu vào về vấn đề đó. Nếu bất kỳ cặp shadow đầu vào nào có một phần chèn và phần còn lại không có phần chèn, toàn bộ danh sách shadow sẽ không được inset.

Nếu danh sách các shadow có độ dài khác nhau, thì danh sách ngắn hơn sẽ được đệm ở cuối bằng các shadow có màu trong suốt, tất cả độ dài đều bằng 0 và có phần chèn (hoặc không) khớp với danh sách dài hơn.

Xem thêm Generic trong Java

Html

Thuộc tính Box shadow trong CSS

Giới thiệu về Box shadow

Cú pháp của Box shadow

Làm cách nào để tạo một box shadow trong CSS?

Thuộc Tính Box-shadow CSS với Giá Trị Ngang và Dọc:

Thuộc Tính Box-shadow CSS với Giá Trị Độ Mờ (Blur)

Giá trị Value của box-shadow

Cách tùy chỉnh Box shadow

Câu hỏi về Box Shadow

Kết luận

Trả lời Hủy