Shadow trong CSS CSS3 hỗ trợ việc thêm Shadow cho văn bản hoặc cho các phần tử.. Thuộc tính shadow có thể phân chia thành: • Text shadow • Box Shadow Text Shadow trong CSS Với CSS3,
Trang 1Shadow trong CSS
CSS3 hỗ trợ việc thêm Shadow cho văn bản hoặc cho các phần tử Thuộc tính shadow có
thể phân chia thành:
• Text shadow
• Box Shadow
Text Shadow trong CSS
Với CSS3, bạn có thể thêm shadow cho văn bản Ví dụ sau minh họa cách thêm shadow
cho văn bản trong CSS3:
<html> <head> <style> h1 { text-shadow: 2px
2px; } h2 { text-shadow: 2px 2px red; }
h3 { text-shadow: 2px 2px 5px red; } h4 {
color: white; text-shadow: 2px 2px 4px #000000; }
h5 { text-shadow: 0 0 3px #FF0000; } h6 {
text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF; } p {
color: white; text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue; } </style> </head> <body>
<h1>Vi du Text Shadow trong CSS</h1> <h2>Vi du Text Shadow trong CSS</h2>
<h3>Vi du Text Shadow trong CSS</h3> <h4>Vi du Text Shadow trong CSS</h4>
<h5>Vi du Text Shadow trong CSS</h5> <h6>Vi du Text Shadow trong CSS</h6>
<p>Vi du Text Shadow trong CSS</p> </body> </html>
Kết quả là:
Vi du Text Shadow trong CSS
Vi du Text Shadow trong CSS
Trang 2Box Shadow trong CSS3
Để thêm hiệu ứng shadow cho các phần tử, bạn có thể sử dụng thuộc tính box-shadow
trong CSS3 Ví dụ sau minh họa cách sử dụng Box Shadow:
<html> <head> <style> div { width: 300px; height: 100px; padding: 15px; background-color: red; box-shadow: 10px 10px; } </style> </head> <body>
<div>Vi du Box Shadow trong CSS</div> </body> </html>
Kết quả là:
Vi du Box Shadow trong CSS