เมื่อสองวันก่อน สาวสวยคนหนึ่งที่กำลังเรียนรู้ส่วนหน้าของ HTML5 ถามฉันเกี่ยวกับวิธีใช้เอฟเฟกต์เงาข้อความ เธอบอกฉันเกี่ยวกับ text-shadow เธอรู้เกี่ยวกับ text-shadow แต่เธอไม่สามารถทำให้มันดูเป็นแบบที่เธอต้องการได้ จริงๆ แล้วฟีเจอร์ใหม่ของ CSS3 นั้นทรงพลังมาก อย่าจำกัดความคิดของคุณมากเกินไป โอเค ซุบซิบกันไปเลย มาดูเงาข้อความนี้กันก่อน
1. เงาข้อความเงาข้อความ พารามิเตอร์เงาข้อความ: พารามิเตอร์ 1: ค่าความยาวแรกถูกใช้เพื่อตั้งค่าออฟเซ็ตแนวนอนของเงาของวัตถุ อาจเป็นค่าลบได้ พารามิเตอร์ 2: ค่าความยาวที่สองใช้เพื่อตั้งค่าออฟเซ็ตแนวตั้งของเงาของวัตถุ สามารถเป็นค่าลบได้ พารามิเตอร์ 3: หากมีการระบุค่าความยาวที่สาม จะใช้ตั้งค่าค่าเงาเบลอของวัตถุ ไม่อนุญาตให้ใช้ค่าลบ พารามิเตอร์ 4: ตั้งค่าสีของเงาของวัตถุ
ข้อความเงา: 10px 10px 50px #000;
2. ตัวอย่างเราจะบรรลุผลในภาพด้านบนได้อย่างไร?
โครงสร้าง HTML แบบอักษรสไตล์ CSS สไตล์แบบอักษร สี ข้อความ เงา จากนั้นเรามาดูโค้ดเฉพาะกัน:
HTML:
<div class=text>[พันอารมณ์] ซางเสวี่ยถัง</div>
ซีเอสเอส:
.text{ แบบอักษร: ตัวหนา 100px/1.5 'Microsoft Yahei'; สี: dodgerblue;/*text-shadow*/ text-shadow: 10px 10px 50px #000; /*text-shadow: 10px 10px 50px #000,-10px - 10px 50px #f00;*/}มาดูวิธีการทำเอฟเฟ็กต์ของสาวงามตัวน้อยถามฉันที่ส่วนหน้ากันดีกว่า..
จริงๆ แล้วมันง่ายมาก ไปที่โค้ดโดยตรงเลย~
HTML:
<div class=text>[พันอารมณ์] ซางเสวี่ยถัง</div>
ซีเอสเอส:
body { พื้นหลัง: #000; color: #fff;}.text{ แบบอักษร: ตัวหนา 100px/1.5 จอร์เจีย sans-serif;/*สีต่างกัน ขนาดเบลอของค่าที่แตกต่างกันหลายค่า*/ text-shadow: 0 0 10px #fff , 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;}กระจายความคิดของคุณ ที่จริงแล้ว สไตล์ CSS3 นั้นน่าสนใจมาก บางครั้งการเปลี่ยนแปลงเพียงเล็กน้อยก็สามารถบรรลุผลที่ยอดเยี่ยมได้^.^
สรุปข้างต้นเป็นคำแนะนำของบรรณาธิการเกี่ยวกับการใช้ Html5 และ CSS เพื่อให้ได้เอฟเฟกต์เงาของข้อความ ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันแล้วโปรแกรมแก้ไขจะตอบกลับคุณทันเวลา ฉันอยากจะขอบคุณทุกคนที่ให้การสนับสนุนเว็บไซต์ศิลปะการต่อสู้ VeVb!