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

      

     明天看哈

  • 相关阅读:
    Python--基本的对象类型(列表_可变的数据类型)
    Python--基本的对象类型(数字int和布尔值bool)
    Java项目目录结构
    linux- day1
    python学习笔记,视频day20-装饰器
    python学习笔记,视频day19-习题
    python学习笔记,视频day17、18-文件处理
    python学习笔记,视频day16 17-内置函数
    python学习笔记,视频day16-函数作用域,匿名函数,map,filter,reduce
    python学习笔记,视频day15-全局变量与局部变量、风湿理论、函数递归
  • 原文地址:https://www.cnblogs.com/secretAngel/p/10187343.html
Copyright © 2011-2022 走看看