CSS3 คุณสมบัติกล่องเงา
ตัวอย่าง
เพื่อเพิ่มความเงาส่วน div:
div
{
box-shadow: 10px 10px 5px #888888;
}
{
box-shadow: 10px 10px 5px #888888;
}
ลอง»
ที่ด้านล่างของหน้านี้ตัวอย่างมากขึ้น
สนับสนุนเบราว์เซอร์
ตัวเลขในตารางเป็นตัวแทนของเบราว์เซอร์แรกที่สนับสนุนหมายเลขรุ่นของทรัพย์สิน
ทันทีหลังจาก -webkit- ดิจิตอล -ms- หรือ -moz- ที่ผ่านมาในการสนับสนุนของคำนำหน้าแอตทริบิวต์หมายเลขรุ่นเบราเซอร์แรก
คุณสมบัติ | |||||
---|---|---|---|---|---|
ขอบภาพ | 10.0 -webkit- | 9.0.0 | 4.0 (2.0) [3] 3.5 (1.9.1) -moz | 5.1 [1] 3.0 -webkit | 10.5 [1] -o- |
แอตทริบิวต์คำจำกัดความและคำแนะนำ
คุณสมบัติกล่องเงาสามารถตั้งค่าหนึ่งหรือมากกว่าหนึ่งของการลดลงกล่องเงา
เริ่มต้น: | ไม่มีเลย |
---|---|
มรดก: | ไม่ |
เวอร์ชัน: | CSS3 |
ไวยากรณ์ javascript: | วัตถุ .style.boxShadow = "10px 10px 5px #888888" |
ไวยากรณ์
box-shadow:h-shadow v-shadow blur spread colorinset;
หมายเหตุ: คุณสมบัติ boxShadowเพื่อเพิ่มหนึ่งหรือมากกว่าเงากรอบ โรงแรมแห่งนี้เป็นรายการที่คั่นด้วยเครื่องหมายจุลภาคของเงาแต่ละสีเทาโดย 2-4 ค่าความยาวค่าสีและเลือกคำหลักที่แทรกตัวเลือกที่ระบุ ค่าความยาวถนัดคือ 0
ความคุ้มค่า | คำอธิบาย |
---|---|
H-เงา | จำเป็นต้องใช้ ตำแหน่งของเงาแนวนอน อนุญาตให้เชิงลบ |
V-เงา | จำเป็นต้องใช้ ตำแหน่งแนวตั้งของเงา อนุญาตให้เชิงลบ |
เบลอ | ไม่จำเป็น ระยะทางเลือน |
กระจาย | ไม่จำเป็น ขนาดของเงา |
สี | ไม่จำเป็น สีเงา ในค่าสี CSS เพื่อค้นหารายการที่สมบูรณ์ของค่าสี |
สิ่งที่ใส่เข้าไป | ไม่จำเป็น จากเงาของชั้นนอก (ที่จุดเริ่มต้น) ในการเปลี่ยนแปลงภายในเงาเงา |
ตัวอย่างออนไลน์
หมุนภาพ
ตัวอย่างนี้แสดงให้เห็นถึงวิธีการสร้าง "โพลารอยด์" ภาพถ่ายและหมุนภาพ
บทความที่เกี่ยวข้อง
กวดวิชา CSS3: CSS3 พรมแดน