คุณสมบัติ text-shadow

คุณสมบัติ text-shadow กำหนดเงาให้กับข้อความ ค่า property รับพารามิเตอร์ 4 ตัว ที่ระบุโดยคั่นด้วยช่องว่าง หรือ คำสำคัญ none เพื่อยกเลิกเงา ทั้งหมด (นี่คือค่าเริ่มต้น)

ไวยากรณ์

ตัวเลือก {
	text-shadow: เลื่อน_ตาม_x เลื่อน_ตาม_y ความเบลอ สี;
}

ตัวเลือก {
	text-shadow: none;
}

พารามิเตอร์

พารามิเตอร์	คำอธิบาย
เลื่อนตาม x	กำหนดการเคลื่อนที่ของเงาตามแกน X ค่าบวกเลื่อนไปทางขวา ค่าลบ - ไปทางซ้าย
เลื่อนตาม y	กำหนดการเคลื่อนที่ของเงาตามแกน Y ค่าบวกเลื่อนลงด้านล่าง ค่าลบ - ขึ้นด้านบน
ความเบลอ	กำหนดความเบลอของเงา ยิ่งค่ามากเท่าไหร่ เงาก็จะยิ่งเบลอมากขึ้น พารามิเตอร์ที่ไม่บังคับ หากไม่ระบุ - เงาจะคมชัด
สี	กำหนดสีของเงาใน หน่วยของสี ใดๆ ก็ได้ พารามิเตอร์ที่ไม่บังคับ หากไม่ระบุ - สีของเงาจะตรงกับสีของข้อความ

การเลื่อนตามแกนและความเบลอกำหนดได้ใน หน่วย สำหรับขนาด ใดๆ ก็ได้ ยกเว้นเปอร์เซ็นต์

ตัวอย่าง

มาเลื่อนเงาลงและไปทางซ้าย และเพิ่ม ความเบลอเล็กน้อย:

<div id="elem">
	Lorem ipsum dolor sit amet
</div>

#elem {
	text-shadow: 5px 5px 3px black;
}

ตัวอย่าง . เงาที่คมชัด

ตอนนี้เราจะทำให้เงามีสีแดง เลื่อน มันลงและไปทางซ้าย แต่เอาความเบลอออก - เงา จะคมชัด:

<div id="elem">
	Lorem ipsum dolor sit amet
</div>

#elem {
	text-shadow: 10px 10px red;
}

ตัวอย่าง . เงาที่สม่ำเสมอ

ตอนนี้เงาไม่ถูกเลื่อน แต่มีการเพิ่ม ความเบลอเข้าไป:

<div id="elem">
	Lorem ipsum dolor sit amet
</div>

#elem {
	text-shadow: 0px 0px 3px black;
}

ดูเพิ่มเติม

คุณสมบัติ box-shadow,
ที่กำหนดเงาให้กับคอนเทนเนอร์