微信浏览器背景颜色background不生效的解决办法

详细介绍

今天搭建了一个防疫返乡政策查询的源码，自行修改了一些广告元素，设置了背景样式。原来的样式如下：

.daohang .dao1{
box-shadow: 0px 0px 6px 2px #1b82f1ff;
background-color: #1b82f12b;}

.daohang .dao3{
box-shadow: 0px 0px 6px 2px #22ac38f1;
background-color: #22ac38;}

.daohang .dao2{
box-shadow: 0px 0px 6px 2px #f14545ff;
background-color: #f14545;}

制作完成后用微信浏览时，发现设置的第一个元素的背景颜色没有生效，并且所有按钮的背景阴影色都没有生效，后来查询了一下发现是因为微信浏览器所采用的内核颜色代码解析方式和谷歌浏览器不同，谷歌浏览器是把十六进制表示方法的最后两位当做透明度,而微信,居然取得是前两位。所以最后将上述的颜色代码改成了rgba模式，微信端就可以正常显示了。

.daohang .dao1{
box-shadow: 0px 0px 6px 2px rgba(27, 130, 241, 115);
background-color: #1b82f1;}

.daohang .dao3{
box-shadow: 0px 0px 6px 2px rgba(34, 172, 56, 181);
background-color: #22ac38;}

.daohang .dao2{
box-shadow: 0px 0px 6px 2px rgba(240, 94, 94, 196);
background-color: #f14545;}