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

      

     明天看哈

  • 相关阅读:
    vue----webpack模板----axios请求
    vue-----meta路由元信息
    vue----webpack模板----全局路由守卫
    vue----webpack模板----局部路由守卫
    vue----webpack模板----组件复用解决方法
    vue----webpack模板----编程式导航
    vue----webpack模板----路由跳转的3中方式
    vue----webpack模板----路由传值
    vue----webpack模板----children子路由,路由嵌套
    vue----webpack模板----路由配置项
  • 原文地址:https://www.cnblogs.com/secretAngel/p/10187343.html
Copyright © 2011-2022 走看看