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

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

ไวยากรณ์

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

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

พารามิเตอร์

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

ตัวอย่าง

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

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

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

Результат:

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

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

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

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

Результат:

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

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

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

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

Результат:

ดูเพิ่มเติม