Thuộc tính box-shadow

Thuộc tính box-shadow đặt bóng cho khối. Làm giá trị, thuộc tính nhận 6 tham số, được liệt kê cách nhau bởi khoảng trắng, hoặc từ khóa none, loại bỏ bóng hoàn toàn.

Cú pháp

bộ chọn {
	box-shadow: inset dịch_chuyển_x dịch_chuyển_y độ_nhòe kích_thước_bóng màu_sắc;
}

bộ chọn {
	box-shadow: none;
}

Các tham số

Tham số	Mô tả
`inset`	Tham số không bắt buộc. Nếu nó được chỉ định, bóng sẽ ở bên trong bộ chứa, nếu không chỉ định - thì ở bên ngoài.
dịch chuyển theo x	Chỉ định độ dịch chuyển của bóng theo trục X. Giá trị dương dịch chuyển sang phải, giá trị âm - sang trái.
dịch chuyển theo y	Chỉ định độ dịch chuyển của bóng theo trục Y. Giá trị dương dịch chuyển xuống dưới, giá trị âm - lên trên.
độ nhòe	Chỉ định độ nhòe của bóng. Giá trị càng lớn - bóng sẽ càng bị nhòe. Tham số không bắt buộc. Nếu không chỉ định - bóng sẽ rõ nét.
kích thước bóng	Chỉ định kích thước của bóng. Giá trị dương kéo dãn bóng, giá trị âm, ngược lại, làm nó co lại. Tham số không bắt buộc. Nếu không chỉ định - bóng sẽ có cùng kích thước với phần tử.
màu sắc	Chỉ định màu của bóng bằng bất kỳ đơn vị nào cho màu sắc. Tham số không bắt buộc. Nếu không chỉ định - màu của bóng trùng với màu của văn bản.

Độ dịch chuyển theo các trục, độ nhòe và kích thước bóng được chỉ định bằng bất kỳ đơn vị nào cho kích thước, ngoại trừ phần trăm.

Ví dụ

Trong ví dụ này, bóng được dịch chuyển xuống dưới và sang phải và được thêm độ nhòe nhỏ:

<div id="elem"></div>

#elem {
	box-shadow: 5px 5px 3px black;
	border: 1px solid black;
	width: 300px;
	height: 50px;
}

Ví dụ . Bóng rõ nét

Trong ví dụ này, bóng được dịch chuyển xuống dưới và sang phải, nhưng không có độ nhòe (bóng sẽ rõ nét):

<div id="elem"></div>

#elem {
	box-shadow: 2px 2px black;
	border: 1px solid black;
	width: 300px;
	height: 50px;
}

Ví dụ . Bóng đồng đều

Trong ví dụ này, bóng không bị dịch chuyển, nhưng nó được thêm độ nhòe:

<div id="elem"></div>

#elem {
	box-shadow: 0px 0px 3px black;
	border: 1px solid black;
	width: 300px;
	height: 50px;
}

Ví dụ . Kích thước bóng

Trong ví dụ này, bóng không bị dịch chuyển, độ nhòe bằng không, nhưng nó được thêm kích thước (màu đen - là đường viền, màu đỏ - là bóng):

<div id="elem"></div>

#elem {
	box-shadow: 0 0 0 3px red;
	border: 3px solid black;
	width: 300px;
	height: 50px;
}

Ví dụ . Độ nhòe + kích thước bóng

Trong ví dụ này, bóng không bị dịch chuyển, nhưng nó được thêm độ nhòe và kích thước (màu đen là đường viền, màu đỏ - là bóng):

<div id="elem"></div>

#elem {
	box-shadow: 0 0 3px 3px black;
	border: 1px solid black;
	width: 300px;
	height: 50px;
}

Ví dụ . Bóng bên trong

Trong ví dụ này, bóng nằm bên trong bộ chứa:

<div id="elem"></div>

#elem {
	box-shadow: inset 0 0 6px black;
	border: 1px solid black;
	width: 300px;
	height: 50px;
}

Xem thêm

thuộc tính text-shadow,
cái mà đặt bóng cho văn bản