คุณสมบัติ text-shadow ของ CSS

นิยามและการใช้งาน

ตัวแปร text-shadow กำหนดเงาหน้าตัวของข้อความ

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

ตัวอย่าง CSS3:ผลลัพธ์ของข้อความ CSS3

คู่มืออ้างอิง HTML DOM:ตัวแปร textShadow

ตัวอย่าง

ภาพรุ่งของเงาของข้อความพื้นฐาน:

h1
{
text-shadow: 5px 5px 5px #FF0000;
}

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

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

ระบบทางการโค้ด CSS

text-shadow: h-shadow v-shadow blur color;

หมายเหตุ:ตัวแปร text-shadow กำหนดเงาหน้าตัวของข้อความหนึ่งหรือหลายเงา. ตัวแปรนี้เป็นรายการเงาที่แยกด้วยคมังคล้วนที่มีสองหรือสามค่าความยาวและค่าสีที่เป็นทางเลือก. ค่าที่ละเมิดทิศทางคือ 0.

ค่าทางนิยาม

ค่า รายละเอียด การทดสอบ
h-shadow จำเป็น. ตำแหน่งของเงาตามทิศทางนอก การทดสอบ
v-shadow จำเป็น. ตำแหน่งของเงาตามทิศทางตั้ง การทดสอบ
blur ความเป็นทางเลือก. ระยะทางที่มีความมัว. การทดสอบ
color ความเป็นทางเลือก. สีของเงา. ค่าสี CSS. การทดสอบ

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

ค่าเริ่มต้น: none
ความเป็นทางเลือก: yes
รุ่น: CSS3
ระบบทางการโค้ด JavaScript: object.style.textShadow="2px 2px #ff0000"

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

เงาของข้อความที่มีประสาทมือเมือง
ตัวอย่างนี้แสดงว่ามีเงาของข้อความที่มีประสาทมือเมือง
เงาของข้อความบนข้อความขาว
ตัวอย่างนี้แสดงว่ามีเงาของข้อความบนข้อความขาว
เงาของข้อความที่มีสีแสงไฟแรง
ตัวอย่างนี้แสดงว่ามีเงาของข้อความที่มีสีแสงไฟแรง

การสนับสนุนโดยเบราเซอร์

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

Chrome IE / Edge Firefox Safari Opera
4.0 10.0 3.5 4.0 9.6