CSS ระบบเงาของกล่อง

คำอธิบายและการใช้งาน

คุณสมบัติ boxShadow กำหนดเงาหนึ่งหรือหลายเงาบนกล่อง

คำแนะนำ:ใช้คุณสมบัติ border-image-* ในการสร้างปุ่มที่สามารถยืดตัวได้ที่มีลักษณะที่ดี!

ดูเพิ่มเติมที่:

ตัวอย่าง CSS3CSS3 ขอบเขต

คู่มืออ้างอิง HTML DOMคุณสมบัติ boxShadow

ตัวอย่าง

เพิ่ม box-shadow ให้กับองค์ประกอบ div

div
{
box-shadow: 10px 10px 5px #888888;
}

ทดลองด้วยตัวเอง

มีตัวอย่างเพิ่มเติมที่ด้านล่างของหน้า

CSS ภาษา

box-shadow: h-shadow v-shadow blur spread color inset;

หมายเหตุ:box-shadow กำหนดเงาหนึ่งหรือหลายเงาบนกล่อง. คุณสมบัตินี้เป็นรายชื่อเงาที่แยกด้วยคำ逗号, แต่ละเงาประกอบด้วย 2-4 ค่าความยาว, ค่าสีที่เลือกตั้งได้, และคำถูกตั้ง inset ที่เลือกตั้งได้. ค่าที่ละเลยคือ 0.

ค่าคุณสมบัติ

ค่า คำอธิบาย การทดสอบ
h-shadow จำเป็น: ตำแหน่งเงาตามทิศตะวันออกเฉียงขึ้น การทดสอบ
v-shadow จำเป็น: ตำแหน่งเงาตามทิศตะวันออกเฉียงขึ้น การทดสอบ
blur เลือกตั้ง: ระยะทางคลุมเงา การทดสอบ
spread เลือกตั้ง: ขนาดของเงา การทดสอบ
color เลือกตั้ง: สีของเงา การทดสอบ
inset เลือกตั้ง: แก้ไขเงานอกเป็นเงาภายใน การทดสอบ

รายละเอียดเทคโนโลยี

ค่าเริ่มต้น: none
การสืบทอด: no
รุ่น: CSS3
การใช้งาน JavaScript object.style.boxShadow="10px 10px 5px #888888"

ตัวอย่างเพิ่มเติม

ภาพที่โยนไปบนโต๊ะ
ตัวอย่างแสดงว่าจะสร้างภาพโปลาเรียะและหมุนภาพ

การสนับสนุนโปรแกรมน่าทึ่ง

ตัวเลขในตารางระบุเวอร์ชั่นแรกที่สนับสนุนคุณสมบัตินี้ทั้งหมด

ตัวเลขที่มี -webkit- หรือ -moz- แสดงว่าเป็นสัญลักษณ์รุ่นแรกที่ใช้เป็นเดี่ยว

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