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

.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下渐变效果有时候失效的更多相关文章

  1. 解决IE8下opacity属性失效问题,无法隐藏元素

    解决IE8下opacity属性失效问题   由于opacity属性存在兼容性问题,所以在IE8下,用opacity来设置元素的透明度,会失效,从而导致页面的样式问题.在IE8及其更早的浏览器下,我们可 ...

  2. vue 下实现 echarts 全国到省份的地图下钻

    vue 下实现 echarts 全国到省份的地图下钻 项目地址:https://github.com/cag2050/vue_echarts_v3_demo

  3. checked、disabled在原生、jquery、vue下不同写法

          以下是原生和jquery <!DOCTYPE html> <html> <head> <meta http-equiv="Content ...

  4. 浅谈Vue下的components模板

    浅谈Vue下的components模板在我们越来越深入Vue时,我们会发现我们对HTML代码的工程量会越来越少,今天我们来谈谈Vue下的 components模板的 初步使用方法与 应用 我们先来简单 ...

  5. VUE(下)

    VUE(下) VUE指令 表单指令 数据的双向指令 v-model = "变量" model绑定的变量,控制的是表单元素的value值 普通表单元素用v-model直接绑定控制va ...

  6. vue下实现input实现图片上传,压缩,拼接以及旋转

    背景 作为一名前端工作人员,相信大家在开发系统的时候,经常有遇到需要这么一种需求,就是需要为用户保存上传的图片,很多小白遇到这个问题的时候,都会虎躯一震,以为会是一个棘手的问题,当你读完这篇文章的时候 ...

  7. IE6下a标签失效(背景穿透)

    background:fixed url(about:blank);有时候做感应区域的时候在ie6下不给背景就会感应不到,比如说当鼠标移到图片的左半边部分,鼠标手势变成向左的箭 头,比如说有些时候a标 ...

  8. Vue下路由History mode导致页面无法渲染的原因

    用 Vue.js + vue-router 创建单页应用,是非常简单的.使用 Vue.js ,我们已经可以通过组合组件来组成应用程序,当你要把 vue-router 添加进来,我们需要做的是,将组件( ...

  9. 解决IE8下opacity属性失效问题

    由于opacity属性存在兼容性问题,所以在IE8下,用opacity来设置元素的透明度,会失效,从而导致页面的样式问题. 在IE8及其更早的浏览器下,我们可以使用filter属性,来代替opacit ...

随机推荐

  1. MySQL总结01

    window删除MySQL服务 cmd下执行 sc delete MySQL 登陆登出 登陆: mysql -uroot -ppasswd -h host 退出登陆 mysqladmin -uroot ...

  2. Django中的缓存机制

    概述       对于中等流量网站来说,尽可能的减少开销是必要的.缓存数据就是为了保存那些需要很多计算资源大的结果,这样的的话就不必在下次重复消耗计算资源.     Django自带了一个健壮的缓存系 ...

  3. 使用pip 时报错 Fatal error in launcher: Unable to create process using '"D:\pytghon2.7\python.exe" "D:\python2.7\S

    无法创建使用pip.exe创建进程,说白了就是无法启动pip安装插件. 解决方法升级pip: python -m pip install -U pip  

  4. python-模块-包

    一 模块 1 什么是模块? 常见的场景:一个模块就是一个包含了python定义和声明的文件,文件名就是模块名字加上.py的后缀. 但其实import加载的模块分为四个通用类别: 1 使用python编 ...

  5. js canvas 粒子动画 电子表

     前言 从我接触canvas的第一天就觉得canvas很有趣,想搞点事情,这几天终于忍不住了,于是他来了. 先看效果                       这里我做了四个大家有兴趣可以看完文章, ...

  6. MHA-Atlas-MySQL高可用(下)

    MHA-Atlas-MySQL高可用(下) 链接:https://pan.baidu.com/s/17Av92KQnJ81Gc0EmxSO7gA 提取码:a8mq 复制这段内容后打开百度网盘手机App ...

  7. PHP-删除排序数组中的重复项

    给定一个排序数组,你需要在原地删除重复出现的元素,使得每个元素只出现一次,返回移除后数组的新长度. 不要使用额外的数组空间,你必须在原地修改输入数组并在使用 O(1) 额外空间的条件下完成. 示例 1 ...

  8. hbase-2.0.4集群部署

    hbase-2.0.4集群部署 1. 集群节点规划: rzx1 HMaster,HRegionServer rzx2 HRegionServer rzx3 HRegionServer 前提:搭建好ha ...

  9. SQL 更新

    SQL UPDATE 语句(更新表中的记录) UPDATE 语句用于更新表中的现有记录. SQL UPDATE 语句 UPDATE 语句用于更新表中已存在的记录. SQL UPDATE 语法 UPDA ...

  10. maven命令行创建项目问题

    今天在命令行下创建maven项目,使用的是create命令,但是一直失败,网上查找原因说archetype:create命令已经过期,需要使用 archetype:generate 来进行代替 加上了 ...