CSS3: Tạo bóng với box-shadow
Bạn có thể tạo bóng cho các khối hình học bằng thuộc tính box-shadow của CSS3. Sau đây là cú pháp của thuộc tính này:
box-shadow: [lệch_ngang] [lệch_dọc] [độ_mờ] [màu_sắc];
, trong đó, lệch_ngang là độ lệch của bóng so với hình theo phương ngang, nếu lệch_ngang>0 thì bóng sẽ lệch phải so với hình, lệch_ngang<0 thì bóng sẽ lệch trái so với hình, lệch_dọc là độ lệch của bóng so với hình theo phương dọc, nếu lệch_dọc>0 thì bóng sẽ lệch dưới so với hình, nếu lệch_dọc<0 thì bóng sẽ lệch trên so với hình, độ_mờ là độ mờ của bóng, màu_sắc là màu của bóng.
Bạn cũng có thể sử dụng cú pháp sau đây để tạo nhiều bóng cho hình:
box-shadow: lệch_ngang lệch_dọc độ_mờ màu_sắc, lệch_ngang1 lệch_dọc1 độ_mờ1 màu_sắc1, lệch_ngang2 lệch_dọc2 độ_mờ2 màu_sắc2, …;
Ví dụ 1: Tạo bóng cho phần tử <div>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#d1,#d2,#d3,#d4{
width:35%;
float:left;
margin-left:60px;
margin-top:60px;
height:100px;
background-color:green;
color:white;
text-align:center;
}
#d1{
box-shadow: 10px 10px 5px #888888;
}
#d2{
box-shadow: -10px 10px 5px #888888;
}
#d3{
box-shadow: 10px -10px 5px #888888;
}
#d4{
box-shadow: -10px -10px 5px #888888;
}
</style>
</head>
<body>
<div id="d1">Bóng đổ theo góc dưới-phải</div>
<div id="d2">Bóng đổ theo góc dưới-trái</div>
<div id="d3">Bóng đổ theo góc trên-phải</div>
<div id="d4">Bóng đổ theo góc trên-trái</div>
</body>
</html>
Ví dụ 2: Ví dụ sau đây sẽ tạo 4 bóng cho phần tử <div>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#d1{
width:60%;
height:100px;
margin-left:60px;
margin-top:60px;
background-color:green;
color:white;
text-align:center;
}
#d1:hover{
box-shadow: 10px 10px 5px #888888,-10px 10px 5px red,10px -10px 5px yellow,-10px -10px 5px blue;
}
</style>
</head>
<body>
<div id="d1">Chạm đây => Đổ bóng theo 4 góc</div>
</body>
</html>