/* 设置字体颜色,以及阴影 */ 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 属性,可以简单易行地为文字添加发光效果,带来更加绚丽的视觉效果。