HTML5 設(shè)置字體倒影 使用 HTML5 的 text-shadow 屬性，可以輕松實(shí)現(xiàn)字體倒影的效果。下面就讓我們來介紹一下具體的實(shí)現(xiàn)方法。 首先，在 CSS 樣式中定義所需字體的樣式，如下所示：

p {
font-size: 36px;
font-family: Arial, sans-serif;
}

上述代碼為設(shè)置字體大小為 36px，字體樣式為 Arial 或 sans-serif。 接著，通過 CSS text-shadow 屬性設(shè)置字體陰影的樣式，形成字體倒影的效果。如下代碼所示：

p {
font-size: 36px;
font-family: Arial, sans-serif;
text-shadow: 0 0 10px #333;
}

text-shadow 屬性由四個(gè)值組成：第一個(gè)值表示橫向陰影的偏移量，正值表示向右，負(fù)值表示向左；第二個(gè)值表示縱向陰影的偏移量，正值表示向下，負(fù)值表示向上；第三個(gè)值為陰影模糊半徑，數(shù)值越大，模糊程度越高；第四個(gè)值為陰影顏色，可以使用顏色名稱、十六進(jìn)制顏色值或 RGB 值。 此時(shí)，一個(gè)簡(jiǎn)單的字體倒影效果已經(jīng)實(shí)現(xiàn)。 完整代碼如下所示：

這是一個(gè)字體倒影效果

參考文獻(xiàn)： W3Schools. (2021). CSS text-shadow Property. [online] Available at: https://www.w3schools.com/cssref/css3_pr_text-shadow.asp [Accessed 23 Jul. 2021].