css3 实现ps文字外发光效果,实现一串文字背后灯光高亮效果。实现文字发光。css实现实现文字背景高亮 电脑版发表于：2019/7/27 17:57 ### CSS3 并没有直接设置发光效果的属性，但是利用text-shadow属性实现此效果 ``` text-shadow: h-shadow v-shadow blur color; ``` 参数解释： | 参数名称 | 说明 | | ------------ | ------------ | | h-shadow | 水平阴影的位置（阴影水平偏移量），可为负值，必需 | | v-shadow | 垂直阴影的位置（阴影垂直偏移量），可为负值，必需 | | blur | 阴影模糊的距离（默认为0），可选 | | color | 阴影颜色（默认为当前字体颜色），可选 | #### text-shadow实现发光文字原理： 1、乍一看，text-shadow 属性仅仅是用来设置文本阴影的，似乎并不能实现字体发光效果，其实不然，这正是 text-shadow 属性的精妙之处。 2、当阴影的水平偏移量 和 垂直偏移量都为0时，阴影就和文本重合了，这时，如果增大阴影模糊的距离，就可以达到字体外发光的效果了。 3、当然，为了使外发光更加炫酷，还需要使用到text-shadow 的另一个特性：同时设置多个阴影（使用逗号分隔设置多个阴影）。 ### 实现示例 实现一串文字背后灯光高亮效果，可以使用 CSS 的 `text-shadow` 属性来实现。 下面是一个简单的例子，可以为文字添加高亮的灯光效果： ```css 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 // 在把前面的一个删除了，后面的几个删除了，看着就更暗了，感觉就要舒服一些了 ```
