คุณสมบัติ box-shadow ของ CSS3 ช่วยให้เราสามารถบรรลุเอฟเฟกต์เงาของเลเยอร์ได้อย่างง่ายดาย มาอธิบายคุณลักษณะนี้โดยละเอียดในทางปฏิบัติ
มาดูความเข้ากันได้ของเบราว์เซอร์ของแอตทริบิวต์นี้ก่อน:
box-shadow มีค่าที่สามารถตั้งค่าได้หกค่า:
img{box-shadow: ประเภทเงา การกระจัดของแกน X การกระจัดของแกน Y ขนาดเงา ส่วนขยายเงา สีเงา}
ให้เราดูผลกระทบของ box-shadow ผ่านตัวอย่างต่างๆ ก่อน สร้าง html อย่างง่ายสำหรับการทดสอบ:
<html>
<หัว>
<style type="text/css">เขียนส่วน CSS ที่นี่</style>
</หัว>
<ร่างกาย>
<img src="test.jpg" />
</ร่างกาย>
</html>
โปรดทราบ : เพื่อบันทึกปัญหา เฉพาะ box-shadow เท่านั้นที่ถูกเขียนในโค้ด CSS ด้านล่าง ในการใช้งานจริง คุณควรเขียน -moz-box-shadow และ -webkit-shadow สิ่งที่คุณต้องทำคือง่ายมาก คัดลอกกล่องเงาสองอันแล้วเพิ่ม -moz- และ -webkit- ข้างหน้า
img {
-moz-box-shadow:2px 2px 10px #06C;
-webkit-box-shadow:2px 2px 10px #06C;
box-shadow:2px 2px 10px #06C;
}