คุณสมบัติ box-shadow ของ CSS3 ช่วยให้เราสามารถบรรลุเอฟเฟกต์เงาของเลเยอร์ได้อย่างง่ายดาย มาอธิบายคุณลักษณะนี้โดยละเอียดในทางปฏิบัติ
1. ความเข้ากันได้ของเบราว์เซอร์ของแอตทริบิวต์ box-shadow มาดูความเข้ากันได้ของเบราว์เซอร์ของแอตทริบิวต์นี้ก่อน:
Opera: ฉันไม่รู้ว่าเวอร์ชันใดที่เริ่มรองรับ เมื่อฉันโพสต์บทความนี้เพื่อทดสอบ ฉันเพิ่งอัปเดต Opera เป็นเวอร์ชันล่าสุด 10.53 ซึ่งรองรับแอตทริบิวต์ box-shadow แล้ว
Firefox รองรับสิ่งนี้ผ่านคุณสมบัติส่วนตัว -moz-box-shadow
Safari และ Chrome รองรับสิ่งนี้ผ่านคุณสมบัติส่วนตัว -webkit-box-shadow
ไม่รองรับ IE ทั้งหมด (ฉันไม่รู้ว่า IE9 ได้รับการปรับปรุงหรือไม่) ไม่ต้องกังวล เราจะแนะนำ Hacks สำหรับ IE บางส่วนในตอนท้ายของบทความ
2. ไวยากรณ์ของแอตทริบิวต์กล่องเงา
box-shadow มีค่าที่สามารถตั้งค่าได้หกค่า:
img{box-shadow: ประเภทเงา การกระจัดของแกน X การกระจัดของแกน Y ขนาดเงา ส่วนขยายเงา สีเงา}
เมื่อไม่ได้ตั้งค่าประเภทเงา ค่าเริ่มต้นคือเอฟเฟกต์เงา เมื่อตั้งค่าเป็น inset จะเป็นเอฟเฟกต์เงาภายใน
การกระจัดของแกน X และแกน Y นั้นไม่เท่ากัน แต่คล้ายกับ "มุม" และ "ตำแหน่ง" ใน Photoshop
ขนาดเงา ส่วนขยาย สีเหมือนกับใน Photoshop
3. ตัวอย่างการวิเคราะห์ ให้เราดูผลกระทบของเงากล่องผ่านตัวอย่างต่างๆ ขั้นแรก สร้าง HTML อย่างง่ายสำหรับการทดสอบ:
<หัว>
<ร่างกาย>
โปรดทราบ: เพื่อบันทึกปัญหา เฉพาะ box-shadow เท่านั้นที่ถูกเขียนในโค้ด CSS ด้านล่าง ในการใช้งานจริง คุณควรเขียน -moz-box-shadow และ -webkit-shadow สิ่งที่คุณต้องทำคือง่ายมาก คัดลอกกล่องเงาสองอันแล้วเพิ่ม -moz- และ -webkit- ข้างหน้า
ไอเอ็มจี {
-moz-box-shadow:2px 2px 10px #06C;
-webkit-box-shadow:2px 2px 10px #06C;
กล่องเงา:2px 2px 10px #06C;
-
(1) เงาตกกระทบ ไม่มีการกระจัด ขนาดเงา 10px ไม่มีการขยาย สี #06C
img {กล่องเงา:0 0 10px #06C;}
ค่าสีที่นี่คือค่า HEX เรายังใช้ค่า RGBA ได้ด้วย ข้อดีของค่า RGBA ก็คือมีค่าความโปร่งใสของอัลฟ่าเพิ่มเติม และคุณสามารถควบคุมความโปร่งใสของเงาได้
img {กล่องเงา: 0 0 10px rgba (0, 255, 0, .5)}
(2) เพิ่มส่วนขยาย 20px ด้านบน
img {กล่องเงา:0 0 10px 20px #06C;}
(3) เงาด้านใน ไม่มีการกระจัด ขนาด 10px ไม่มีการขยาย สี #06C
img {กล่องเงา: สิ่งที่ใส่เข้าไป 0 0 10px #06C;}
(4) เอฟเฟกต์เงาหลายแบบ
Box-shadow สามารถใช้ได้หลายครั้งในเวลาเดียวกัน ลองใช้เงาสี่สีกัน
img {กล่องเงา: -10px 0 10px สีแดง, กล่องเงา: 10px 0 10px สีน้ำเงิน, กล่องเงา: 0 -10px 10px สีเหลือง, กล่องเงา: 0 10px 10px สีเขียว}
(5) ลำดับการใช้แอตทริบิวต์เงาหลายรายการสำหรับองค์ประกอบเดียวกันคุณต้องใส่ใจกับลำดับของเงาที่เขียนก่อนจะแสดงที่ด้านบน ตัวอย่างเช่น ในโค้ดต่อไปนี้ ขั้นแรกเราจะเขียนเงาสีเขียวขนาด 10px จากนั้นจึงเขียนขนาด 10px แต่ขยายเป็นเงาขนาด 20px ผลลัพธ์ที่ได้คือ ชั้นแรเงาสีเขียวที่ด้านบนของชั้นแรเงาสีเหลือง
img {กล่องเงา: 0 0 10px สีเขียวกล่องเงา: 0 0 10px 20px สีเหลือง}
แต่ถ้าเราเปลี่ยนลำดับดังนี้:
img {box-shadow:0 0 10px 20px สีเหลือง,box-shadow:0 0 10px สีเขียว;}
เราจะไม่เห็นเลเยอร์สีเทาที่เขียนไว้ในภายหลัง เนื่องจากถูกปกคลุมด้วยเลเยอร์สีเหลืองที่เขียนไว้ก่อนและมีรัศมีใหญ่กว่า
4. ให้ IE รองรับ box-shadow ด้วย
IE เองใช้ตัวกรองเงาเพื่อให้ได้เอฟเฟกต์ที่คล้ายกัน และยังมีไฟล์แฮ็ก js และ .htc บางไฟล์ที่สามารถช่วยให้คุณบรรลุเอฟเฟกต์นี้ใน IE ฉันไม่สามารถลองใช้ทั้งหมดได้ ดังนั้นที่นี่ฉันจะแนะนำเฉพาะตัวที่ฉันเคยใช้เท่านั้น
ie-css3.htc เป็นไฟล์ htc ที่อนุญาตให้เบราว์เซอร์ IE รองรับคุณสมบัติ CSS3 บางอย่าง ไม่ใช่แค่ box-shadow แต่ยังอนุญาตให้เบราว์เซอร์ IE ของคุณรองรับแอตทริบิวต์มุมโค้งมน border-radius และแอตทริบิวต์ text-shadow text-shadow
วิธีใช้: ดาวน์โหลดและใส่ไว้ในไดเร็กทอรีเซิร์ฟเวอร์ของคุณ
เขียนโค้ดต่อไปนี้ใน
ของคุณ:
ในส่วนสีน้ำเงิน ให้ป้อนตัวเลือกโดยใช้แอตทริบิวต์ box-shadow และในส่วนสีเขียว ให้ป้อนเส้นทางสัมบูรณ์หรือเส้นทางสัมพัทธ์ของ ie-css3.htc อย่างไรก็ตาม ตรวจสอบให้แน่ใจว่าสามารถเข้าถึงได้
ถ้าอย่างนั้นก็ไม่เป็นไร แต่ยังมีบางสิ่งที่ควรทราบ:
เมื่อคุณใช้ไฟล์ htc นี้ ตราบใดที่ box-shadow, -moz-box-shadow หรือ -webkit-box-shadow ถูกเขียนใน CSS ของคุณ IE ก็จะเรนเดอร์มัน
เมื่อใช้ไฟล์ htc นี้ คุณจะไม่สามารถเขียน box-shadow: 0 0 10px red; แต่ box-shadow: 0px 0px 10px red;
ไม่รองรับความโปร่งใสอัลฟ่าในค่า RGBA
ไม่รองรับเงาด้านในที่แทรกไว้
ไม่รองรับการขยายเงา
เงาจะปรากฏเป็นสีดำใน IE เท่านั้น ไม่ว่าคุณจะตั้งค่าสีอื่นไว้ก็ตาม
ดังนั้นสคริปต์นี้อนุญาตให้ IE รองรับค่า box-shadow บางค่าเท่านั้น หากคุณมีสคริปต์แฮ็ก IE ที่ดีกว่าอื่น ๆ โปรดฝากข้อความไว้เพื่อแบ่งปัน