记录一个问题:我在项目中给按钮设置一个渐变属性,调试的时候有时候有效果,有时候又没有,代码如下:
.training-right-bmz { background: -webkit-linear-gradient(left, #21dfad, #06b7ba); background: -moz-linear-gradient(left, #21dfad, #06b7ba); background: -ms-linear-gradient(left, #21dfad, #06b7ba); background: -o-linear-gradient(left, #21dfad, #06b7ba); background: linear-gradient(left, #21dfad, #06b7ba); border-radius: 100px 0 0 100px; border: none; color: #fff; font-size: 14px; position: absolute; padding: 4px 12px; right: 0px; top: 34px; }
打开浏览器调试看了下,渐变属性那里变成了感叹号,效果没有渲染出来,想了N多方法还是没有戏,
、、、、
下班回来百度,看到一个大佬的文章,https://www.cnblogs.com/sxgxiaoge/p/9646949.html(Vue项目打包上线后,所使用的css3渐变属性丢失解决方案),突然觉得好像我在写样式代码的时候,有注释的时候,渐变是出来的,没有注释有时候渐变没有了,于是按照大佬的方法:“可能是optimize-css-assets-webpack-plugin
这个插件的问题,其实解决办法很简单,只需要在这个属性前后加一个特殊注释即可”,直接加注释,
.training-right-bmz { // background: #21dfad; background: -webkit-linear-gradient(left, #21dfad, #06b7ba); background: -moz-linear-gradient(left, #21dfad, #06b7ba); background: -ms-linear-gradient(left, #21dfad, #06b7ba); background: -o-linear-gradient(left, #21dfad, #06b7ba); background: linear-gradient(left, #21dfad, #06b7ba); border-radius: 100px 0 0 100px; border: none; color: #fff; font-size: 14px; position: absolute; padding: 4px 12px; right: 0px; top: 34px; }
发现渐变出来了,有点懵逼,不晓得是不是因为插件的原因还是啥,先记录一下,等明天给测试看看效果还有没有
.
.
发现问题:随便注释还是不行,直接用大佬的注释代码试试看,如下:
.btn-baomingzhong { /*! autoprefixer: off */ background: -webkit-gradient( linear, 100% 0, 0 0, from(#21dfad), to(#06b7ba) ); background: -webkit-linear-gradient(left, #21dfad, #06b7ba); /* autoprefixer: on */ background: -moz-linear-gradient(left, #21dfad, #06b7ba); background: -ms-linear-gradient(left, #21dfad, #06b7ba); background: -o-linear-gradient(left, #21dfad, #06b7ba); background: linear-gradient(left, #21dfad, #06b7ba); border-radius: 100px 0 0 100px; border: none; color: #fff; font-size: 14px; position: absolute; padding: 4px 12px; right: 0px; }
明天看哈