css3 实现ps文字外发光效果,实现一串文字背后灯光高亮效果。实现文字发光。css实现实现文字背景高亮

CSS3 并没有直接设置发光效果的属性，但是利用text-shadow属性实现此效果

text-shadow: h-shadow v-shadow blur color;

参数解释：

text-shadow实现发光文字原理：

1、乍一看，text-shadow 属性仅仅是用来设置文本阴影的，似乎并不能实现字体发光效果，其实不然，这正是 text-shadow 属性的精妙之处。
2、当阴影的水平偏移量 和 垂直偏移量都为0时，阴影就和文本重合了，这时，如果增大阴影模糊的距离，就可以达到字体外发光的效果了。
3、当然，为了使外发光更加炫酷，还需要使用到text-shadow 的另一个特性：同时设置多个阴影（使用逗号分隔设置多个阴影）。

实现示例

实现一串文字背后灯光高亮效果，可以使用 CSS 的 text-shadow 属性来实现。

下面是一个简单的例子，可以为文字添加高亮的灯光效果：

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;

其中，text-shadow 属性接受多个参数，每个参数用逗号隔开。每个参数都表示一个阴影，包括水平偏移量、垂直偏移量、模糊半径和颜色。

在上面的例子中，我们为文字添加了 8 个阴影，颜色从白色到粉红色。这样就可以实现一串文字背后灯光高亮效果。

你可以根据需要调整阴影的数量、颜色和大小，以达到更好的效果。

效果如下：

我们把颜色调整一下，不要那么粉

text-shadow: 0 0 10px #DBE5F0, 0 0 20px #DBE5F0, 0 0 30px #DBE5F0, 0 0 40px #B4D3F6, 0 0 70px #B4D3F6, 0 0 80px #B4D3F6, 0 0 100px #B4D3F6, 0 0 150px #B4D3F6;

效果如下：

如果要调整暗一点，不要那么亮

text-shadow: 0 0 30px #DBE5F0, 0 0 40px #B4D3F6, 0 0 70px #B4D3F6, 0 0 80px #B4D3F6, 0 0 100px #B4D3F6, 0 0 150px #B4D3F6;

在暗一点

text-shadow: 0 0 30px #B4D3F6, 0 0 70px #B4D3F6, 0 0 80px #B4D3F6

然后把数值改大一点就更暗了，数值越大越暗,可以根据需要调整

text-shadow: 0 0 40px #B4D3F6, 0 0 80px #B4D3F6, 0 0 90px #B4D3F6 // 在把前面的一个删除了，后面的几个删除了，看着就更暗了，感觉就要舒服一些了