Vue下渐变效果有时候失效

记录一个问题：我在项目中给按钮设置一个渐变属性，调试的时候有时候有效果，有时候又没有，代码如下:

.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;

}

明天看哈

巴特西

Vue下渐变效果有时候失效

最新文章

热门文章