เพิ่มเติม "Try it Yourself" ตัวอย่างด้านล่าง
ความหมายและการใช้งาน
สถานที่ให้บริการข้อความเงาเพิ่มความเงาให้กับข้อความ
สถานที่ให้บริการนี้ยอมรับรายการคั่นด้วยเครื่องหมายจุลภาคของเงาที่จะนำไปใช้กับข้อความที่
| ค่าเริ่มต้น: | none |
|---|---|
| รับการถ่ายทอด: | yes |
| Animatable: | yes. Read about animatable Try it |
| เวอร์ชัน: | CSS3 |
| ไวยากรณ์ javascript: | object .style.textShadow="2px 5px 5px red" Try it |
สนับสนุนเบราว์เซอร์
ตัวเลขในตารางระบุราว์เซอร์รุ่นแรกที่สนับสนุนอย่างเต็มที่ทรัพย์สิน
| คุณสมบัติ | |||||
|---|---|---|---|---|---|
| text-shadow | 4.0 | 10.0 | 3.5 | 4.0 | 9.6 |
CSS ไวยากรณ์
text-shadow:h-shadow v-shadow blur-radius color|none|initial|inherit;Note: หากต้องการเพิ่มมากกว่าหนึ่งเงาข้อความเพิ่มรายการคั่นด้วยเครื่องหมายจุลภาคของเงา
ค่าทรัพย์สิน
| ความคุ้มค่า | ลักษณะ | เล่น |
|---|---|---|
| h-shadow | จำเป็นต้องใช้ ตำแหน่งของเงาแนวนอน ค่าลบจะได้รับอนุญาต | เล่น " |
| v-shadow | จำเป็นต้องใช้ ตำแหน่งของเงาแนวตั้ง ค่าลบจะได้รับอนุญาต | เล่น " |
| blur-radius | ไม่จำเป็น. รัศมีเบลอ ค่าเริ่มต้นคือ 0 | เล่น " |
| color | ไม่จำเป็น. สีของเงา ดู CSS ค่าสี สำหรับรายการที่สมบูรณ์ของค่าสีที่เป็นไปได้ | เล่น " |
| none | ค่ามาตรฐาน ไม่มีเงา | เล่น " |
| initial | การตั้งค่าคุณสมบัตินี้เป็นค่าเริ่มต้น อ่านเกี่ยวกับการเริ่มต้น | เล่น " |
| inherit | สืบทอดคุณสมบัตินี้จากองค์ประกอบหลักของมัน อ่านเกี่ยวกับการรับมรดก |
ตัวอย่างเพิ่มเติม
ตัวอย่าง
ตัวอย่างนี้แสดงให้เห็นถึงข้อความที่มีผลกระทบเงาเบลอ:
h1 {
text-shadow: 2px 2px 8px #FF0000;
} ลองตัวเอง» ตัวอย่าง
ตัวอย่างนี้แสดงให้เห็นถึงข้อความเงาบนข้อความสีขาว:
h1 {
color: white;
text-shadow:
2px 2px 4px #000000;
} ลองตัวเอง» ตัวอย่าง
ตัวอย่างนี้แสดงให้เห็นถึงข้อความเงาด้วยแสงนีออนสีแดง:
h1 {
text-shadow: 0 0 3px #FF0000;
} ลองตัวเอง» ตัวอย่าง
ตัวอย่างนี้แสดงให้เห็นถึงข้อความเงาด้วยแสงนีออนสีแดงและสีน้ำเงิน:
h1 {
text-shadow: 0 0 3px #FF0000,
0 0 5px #0000FF;
} ลองตัวเอง» หน้าเว็บที่เกี่ยวข้อง
กวดวิชา CSS3: ผลกระทบ CSS3 ข้อความ
อ้างอิง HTML DOM: textShadow property