เอฟเฟกต์เงา CSS เป็นคุณสมบัติ CSS ที่เรามักใช้ แต่คุณเคยเข้าใจมันอย่างละเอียดหรือไม่? คุณเพียงแค่ต้องคัดลอกโดยตรงจาก Blue Lake เมื่อใช้งาน คุณเข้าใจพารามิเตอร์แต่ละตัวหรือไม่ เอฟเฟกต์ที่สวยงามใดบ้างที่สามารถทำได้โดยใช้เงา?
เอฟเฟกต์เงามักใช้ในการออกแบบเว็บ เอฟเฟกต์เงาสามารถเน้นองค์ประกอบได้ ก่อนการถือกำเนิดของ CSS3 หากเราต้องการเพิ่มเอฟเฟกต์เงาให้กับข้อความหรือองค์ประกอบ เราจำเป็นต้องใช้รูปภาพเพื่อให้บรรลุซึ่งไม่สะดวกมาก หลังจากการเกิดขึ้นของ CSS3 เราสามารถเพิ่มเอฟเฟกต์เงาให้กับข้อความหรือองค์ประกอบผ่านคุณสมบัติสองประการของ text-shadow และ box-shadow โดยไม่ต้องใช้รูปภาพใดๆ
1. ข้อความเงา
การใช้คุณสมบัติ text-shadow ของ CSS ทำให้เราสามารถตั้งค่าเอฟเฟกต์เงาให้กับข้อความได้ ไวยากรณ์ของคุณสมบัติมีดังนี้:
ข้อความเงา: offset-xoffset-yblurcolor;
ไวยากรณ์อธิบายไว้ดังนี้:
(1) offset-x: พารามิเตอร์ที่จำเป็น ตั้งค่าออฟเซ็ตแนวนอนของเงาซึ่งอาจเป็นค่าลบ
(2) offset-y: พารามิเตอร์ที่จำเป็น ตั้งค่าชดเชยแนวตั้งของเงา ซึ่งอาจเป็นค่าลบ
(3) เบลอ: พารามิเตอร์เสริม ตั้งค่ารัศมีของความเบลอ ยิ่งค่าเบลอมากเท่าไร ก็ยิ่งไม่อนุญาตให้ใช้ค่าลบเท่านั้น
(4) สี: พารามิเตอร์ทางเลือก ตั้งค่าสีของเงา หากละเว้นค่าหรือไม่ได้ระบุ ค่าของแอตทริบิวต์สีจะถูกใช้
เคล็ดลับ: ใช้แอตทริบิวต์ text-shadow เพื่อตั้งค่ากลุ่มเอฟเฟกต์เงาหลายกลุ่มพร้อมกัน เร็วๆ นี้. นอกจากนี้ หากคุณต้องการยกเลิกเอฟเฟกต์เงาของข้อความ คุณสามารถตั้งค่าของแอตทริบิวต์ text-shadow เป็น none ได้
[ตัวอย่าง] ใช้ text-shadow แอตทริบิวต์เพื่อเพิ่มผลเงาให้กับข้อความ:
<!doctypehtml><html><head><metacharset=UTF-8><metahttp-equiv=X-UA-Compatiblecontent=ie=edge><title>ข้อความเงา</title></head><style>div :first-child{text-shadow:5px8px3pxred;}</style><body><div>เงาข้อความ</div></body></html>ผลการวิ่ง:
การวิเคราะห์: ข้อความ-เงา: 5px 8px 3px สีแดง;
2.กล่อง-เงา
การใช้คุณสมบัติ box-shadow ของ CSS ทำให้เราสามารถตั้งค่าเอฟเฟกต์เงาสำหรับองค์ประกอบ HTML ได้ ไวยากรณ์ของคุณสมบัติมีดังนี้:
กล่องเงา: h-shadowv-shadowblurspreadcolorinset;
ไวยากรณ์อธิบายไว้ดังนี้:
(1) h-shadow: พารามิเตอร์ที่ต้องการ ตั้งค่าออฟเซ็ตในทิศทางแนวนอนของเงา ซึ่งอาจเป็นค่าลบ
(2) v-shadow: พารามิเตอร์ที่จำเป็น ตั้งค่าออฟเซ็ตในทิศทางแนวตั้งของเงา ซึ่งอาจเป็นค่าลบ
(3) เบลอ: พารามิเตอร์เสริม ตั้งค่ารัศมีของความเบลอ ยิ่งค่าเบลอมากเท่าไร ก็ยิ่งไม่อนุญาตให้ใช้ค่าลบเท่านั้น
(4) การแพร่กระจาย: พารามิเตอร์เสริม กำหนดขนาดของเงา
(5) สี: พารามิเตอร์เสริม ตั้งค่าสีของเงา
(6) สิ่งที่ใส่เข้าไป: พารามิเตอร์ทางเลือก เปลี่ยนเงาด้านนอกเริ่มต้น (เริ่มต้น) เป็นเงาด้านใน
เคล็ดลับ: เช่นเดียวกับแอตทริบิวต์ text-shadow คุณลักษณะ box-shadow ยังสามารถตั้งค่าเอฟเฟกต์เงาหลายกลุ่มพร้อมกันได้ ใช้เครื่องหมายจุลภาคเพื่อแยกแต่ละกลุ่มของเอฟเฟกต์เงาที่กำหนดจะถูกแสดงรายการตามลำดับคำจำกัดความ โดยมีเงาแรกอยู่ด้านบนเป็นต้น
[ตัวอย่าง] ใช้แอตทริบิวต์ box-shadow เพื่อเพิ่มเอฟเฟกต์เงาให้กับข้อความ:
<!doctypehtml><html><head><metacharset=UTF-8><metahttp-equiv=X-UA-Compatiblecontent=ie=edge><title>box-shadow</title></head><style>div :ลูกคนแรก{width:200px;height:200px;border:1pxsolidblack;box-shadow:5px8px3px2pxred;}</style><body><div></div></body></html>ผลการวิ่ง:
การวิเคราะห์: กล่องเงา: 5px 8px 3px 2px คำอธิบายพารามิเตอร์สีแดง