Shadow effects (hiệu ứng bóng)

CSS3 cung cấp hiệu ứng tạo bóng đến văn bản và các phần tử. Hai thuộc tính cơ bản là:

text-shadow
box-shadow

Trình duyệt hỗ trợ

	Chrome	IE/Edge	Firefox	Safari	Opera
text-shadow	4.0	10.0	3.5	4.0	9.5
box-shadow	10.0 4.0 -webkit-	9.0	4.0 3.5 -moz-	5.1 3.1 -webkit-	10.5

Các trình duyệt Chrome, Firefox, Safari có sử dụng tiền tố (prefix) như –webkit-, –moz-. Các số đứng trước các tiền tố là phiên bản bắt đầu của trình duyệt có sử dụng tiền tố, ví dụ trong Chrome và thuộc tính box-shadow có 4.0-webkit– nghĩa là kể từ phiên bản Chrome 4.0 sử dụng –webkit-box-shadow.

Ví dụ text-shadow:


h1 {

text-shadow: 2px 2px;

}

<h1>Text-shadow effect!</h1>

Kết quả:

Ví dụ box-shadow:


div {

width: 300px;

height: 100px;

padding: 15px;

background-color: yellow;

box-shadow: 10px 10px;

}

<div>This is a div element with a box-shadow</div>

Kết quả: