CSS 通過 text-shadow 屬性,可以實現字體發光的效果。
/* 設置字體顏色,以及陰影 */ h1 { color: #fff; text-shadow: 2px 2px 0 #ff0000; /* 水平偏移量,垂直偏移量,模糊半徑,陰影顏色 */ }
text-shadow 屬性需要指定四個參數:
- 水平偏移量:表示陰影水平方向的位置,可正可負。
- 垂直偏移量:表示陰影垂直方向的位置,可正可負。
- 模糊半徑:表示陰影的擴散程度,數值越大,擴散程度越大。
- 陰影顏色:表示陰影的顏色。
通過調整這些參數,可以實現不同樣式的字體發光效果。
/* 橙色字體發光 */ h2 { color: #ff6600; text-shadow: 0 0 10px #ff6600; } /* 白色字體發光 */ h3 { color: #fff; text-shadow: 0 0 10px #fff; }
除了文字,也可以通過 ::before 和 ::after 偽元素來為元素添加發光效果。
/* 使用 ::before 偽元素為元素添加發光效果 */ div::before { content: ""; position: absolute; top: -5px; left: -5px; width: 100%; height: 100%; border-radius: inherit; box-shadow: 0 0 10px #fff; z-index: -1; }
上面代碼中的 ::before 偽元素使用了 box-shadow 屬性來添加發光效果。
總之,通過 text-shadow 屬性,可以簡單易行地為文字添加發光效果,帶來更加絢麗的視覺效果。
下一篇css實現垂直水平劇中