今天折腾的时候突然有一个比较特殊的需求，就是添加一个效果，具体的效果可以下面文章的截图部分：

如果你是前端达人的话，估计根本不值一提，但是我先说说我的情况。

这个图标的背景色是通过PHP动态生成的，所以通过CSS实现图标周边虚化的效果仅仅只能到虚化程度，但是无法添加和按钮同样的颜色。鉴于颜色是随机的，固定的CSS已经不再考虑范围了。

这里需要说明一下，这个虚化的效果是通过before的效果实现的，不要问我为什么要通过before实现，因为这个效果我是从别的站点扒下来的，他就是用的before效果，只不过差别就是我的颜色是随机的，他的是写死的。

经过思考，我能想到的就是通过JS来实现了，首先获取按钮的颜色，然后通过JS修改before的背景颜色，说干就干，但是干到一半发现代码都没错，可视就是不出效果，经过谷歌之后了解到原来我的想法是行不通的，并不能直接通过JS修改伪元素的属性值，那么只能曲线救国了，直接通过头部加载sytle样式，强制修改即可，虽然这样可能会造成所有同类元素都变成同样的颜色，但是好在我需要修改的对象在每篇文章里面仅存在一个，所以我的目的达到了。

那么关于这方面我也继续了解了一下，方法确实是有。但是感觉都来的比较复杂，针对我的情况，头部直接加载CSS是最直接且有效果的。

下面是几个来网络的介绍内容： [list title="" type="" unique_number="list_d418cbde7107466eb7322744479568b4"] https://www.zhihu.com/question/264684026 https://blog.csdn.net/aitangyong/article/details/46685721 https://github.com/zheng-94/blog/issues/24 [/list]