zoukankan      html  css  js  c++  java
  • 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;
    }
    

      

     明天看哈

  • 相关阅读:
    Java堆栈详解
    JVM 图形化监控工具
    Tomcat 7优化前及优化后的性能对比
    Java 枚举常见7种用法
    GitHub上如何删除repository仓库
    eclipse下使用git上传(下载)代码至(从)github
    标准的软件工程过程之文档标准
    maven添加本地非repository中的jar包
    Junit初级篇
    mongodb拷贝数据库copyDatabase()。实现释放磁盘空间的方法。
  • 原文地址:https://www.cnblogs.com/secretAngel/p/10187343.html
Copyright © 2011-2022 走看看