Question 1

พร็อพเพอร์ตี้ text-shadow ใน CSS คืออะไร?

Accepted Answer

text-shadow เพิ่มเอฟเฟกต์เงาให้ตัวอักษร แต่ละเงากำหนดด้วยออฟเซ็ตแนวนอน ออฟเซ็ตแนวตั้ง รัศมีเบลอแบบเลือกได้ และสี โดยรวมหลายเงาไว้ในค่าเดียวคั่นด้วยจุลภาคเพื่อสร้างเอฟเฟกต์ที่หลากหลาย

Question 2

เลเยอร์เงาหลายชั้นทำงานอย่างไร?

Accepted Answer

เลเยอร์ถูกวาดจากล่างขึ้นบนตามลำดับที่ประกาศ เงาแรกในลิสต์จึงอยู่บนสุด ตัวสร้างนี้ให้เพิ่ม ลบ เปิดและปิดเลเยอร์ได้ แต่ละเลเยอร์มีออฟเซ็ต เบลอ สี และความทึบเป็นของตัวเองเพื่อซ้อนเอฟเฟกต์อย่างนีออนหรือ 3D

Question 3

ออฟเซ็ต X, ออฟเซ็ต Y และเบลอหมายถึงอะไร?

Accepted Answer

ออฟเซ็ต X เลื่อนเงาไปซ้ายหรือขวาของตัวอักษร ออฟเซ็ต Y เลื่อนขึ้นหรือลง และรัศมีเบลอทำให้ขอบนุ่ม: 0 ให้ขอบแข็งแบบสไตล์เรโทรหรือเส้นขอบ ส่วนค่าที่มากขึ้นกระจายสีแบบแสงเรือง

Question 4

ทำเอฟเฟกต์เรืองแสงนีออนอย่างไร?

Accepted Answer

ใช้พรีเซ็ตนีออน หรือตั้งหลายเลเยอร์ด้วยออฟเซ็ตศูนย์ สีสว่างเดียวกัน และค่าเบลอที่เพิ่มขึ้นเรื่อย ๆ เช่น 0 0 3px, 0 0 8px และ 0 0 20px รัศมีซ้อนกันจะจำลองแสงหลอดนีออน

Question 5

text-shadow กระทบประสิทธิภาพการเรนเดอร์หรือไม่?

Accepted Answer

เลเยอร์นิ่งไม่กี่ชั้นสิ้นเปลืองน้อย แต่ข้อความที่มีเงาเบลอใหญ่หลายชั้นแพงกว่าตอนวาดใหม่ การใช้เงาหนักกับย่อหน้ายาวหรืออนิเมต text-shadow ตลอดเวลาอาจทำเฟรมหลุดบนอุปกรณ์อ่อนแอและมือถือ ควรใช้กับหัวข้อสั้น เบลอพอประมาณ หรืออนิเมตความทึบแทน

Question 6

ทำให้เงาโปร่งแสงครึ่งหนึ่งได้อย่างไร?

Accepted Answer

ทุกเลเยอร์มีสไลเดอร์ความทึบที่แปลงสีที่เลือกเป็นรูปแบบ rgba เช่น rgba(0, 0, 0, 0.5) เงาโปร่งแสงกลมกลืนกับพื้นหลังใดก็ได้ ซึ่งพรีเซ็ตกระดาษใช้สร้างลุคปั๊มนูนที่นุ่มนวล

Question 7

text-shadow ต่างจาก box-shadow อย่างไร?

Accepted Answer

text-shadow ใช้กับรูปทรงตัวอักษรและไม่มีค่ากระจายหรือด้านใน ส่วน box-shadow ล้อมกล่องสี่เหลี่ยมขององค์ประกอบใด ๆ ไวยากรณ์ออฟเซ็ตและเบลอเหมือนกันแต่ใช้แทนกันไม่ได้

Question 8

เบราว์เซอร์ใดรองรับ text-shadow?

Accepted Answer

text-shadow รองรับในเบราว์เซอร์สมัยใหม่ทุกตัว ทั้ง Chrome, Firefox, Safari, Edge และ Opera และเสถียรแบบไม่ต้องมีพรีฟิกซ์มากว่าสิบปี เงาหลายเลเยอร์ทำงานเหมือนกันทุกที่

Question 9

ข้อความที่พิมพ์ถูกอัปโหลดไปเซิร์ฟเวอร์หรือไม่?

Accepted Answer

ไม่ ข้อความตัวอย่างและเลเยอร์ทั้งหมดที่ตั้งค่าอยู่ในเบราว์เซอร์ของคุณ และโค้ด CSS ถูกสร้างในเครื่องบนหน้าเว็บ ไม่มีอะไรส่งผ่านเครือข่าย เครื่องมือจึงใช้แบบออฟไลน์ได้หลังโหลดแล้ว

ตัวสร้าง Text Shadow CSS

วิธีใช้ ตัวสร้าง Text Shadow CSS