คุณสมบัติ text-shadow ใน CSS2 ทำให้ง่ายต่อการเพิ่มเงาให้กับข้อความในหน้าเว็บ แต่จนถึงขณะนี้มีเพียง Safari บน OS X เท่านั้นที่สนับสนุน วันนี้เราจะสร้างเอฟเฟกต์เงาข้อความ CSS สำหรับเบราว์เซอร์อื่น ๆ รวมถึง Firefox และสามารถทำได้ ผ่านการตรวจสอบ w3
คุณสมบัติ text-shadow ที่มีการพูดคุยกันมานานหลายปี ช่วยให้คุณสามารถควบคุมสี การชดเชย และความเบลอของเงาบนองค์ประกอบของหน้าได้ แม้ว่าจะยังไม่ได้รับการรองรับอย่างกว้างขวาง แต่นักออกแบบบางคนก็เริ่มตัดสินใจใช้ข้อความ CSS- ทรัพย์สินเงาทุกที่ แม้ว่าจะได้รับการออกแบบมาเพื่อปรับปรุงฟังก์ชันการทำงานสำหรับผู้ใช้จำนวนน้อยเท่านั้น
ต่อไปนี้เป็นตัวอย่าง เมื่อใช้ ให้ใส่ใจกับตำแหน่ง:ญาติของ a และตำแหน่ง:absoluteview plaincopy to clipboardprint?
<สไตล์>
ul, li { ระยะขอบ: 0px; การขยาย: 0px; list-style-type: none;}
#nav{font-family: Verdana, "宋体", Arial;}
#nav li { ลอย: ซ้าย;
#nav ช่วง {จอแสดงผล: ไม่มี;}
#nav a{font-size:12px;font-weight:old;color: #FF6600;text- decoration: none; display:block;}
#nav a:hover{ color:#999;top:1px; left:1px;
#nav a:hover span{ จอแสดงผล:บล็อก; ด้านบน:-2px; ตำแหน่ง:สัมบูรณ์; สี:#FF3300;เคอร์เซอร์:ตัวชี้;}
</สไตล์>
<สไตล์>
ul, li { ระยะขอบ: 0px; การขยาย: 0px; list-style-type: none;}
#nav{font-family: Verdana, "宋体", Arial;}
#nav li { ลอย: ซ้าย;
#nav ช่วง {จอแสดงผล: ไม่มี;}
#nav a{font-size:12px;font-weight:old;color: #FF6600;text- decoration: none; display:block;}
#nav a:hover{ color:#999;top:1px; left:1px;
#nav a:hover span{ จอแสดงผล:บล็อก; ด้านบน:-2px; ตำแหน่ง:สัมบูรณ์; สี:#FF3300;เคอร์เซอร์:ตัวชี้;}
</style>ดูสำเนาธรรมดาไปยังคลิปบอร์ดพริ้นท์หรือไม่
<div id="nav">
<ul>
<li><a href="#">หน้าแรกของเว็บไซต์<span>หน้าแรกของเว็บไซต์</span></a></li>
<li><a href="#">หน้าแรกของเว็บไซต์<span>หน้าแรกของเว็บไซต์</span></a></li>
<li><a href="#">หน้าแรกของเว็บไซต์<span>หน้าแรกของเว็บไซต์</span></a></li>
<li><a href="#">หน้าแรกของเว็บไซต์<span>หน้าแรกของเว็บไซต์</span></a></li>
<li><a href="#">หน้าแรกของเว็บไซต์<span>หน้าแรกของเว็บไซต์</span></a></li>
</ul>
</div>