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

.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. JSON工具类的构建(前端版本)

    前言 在前后端交互的选择上,之前一直采用的是模板引擎(因为我只负责后端). 而这次的一个算是作业吧,前后端都是我,所以就研究了一下JSON交互在java web的应用(主要是前端). 优缺点 因为我是 ...

  2. UVALive 4794 Sharing Chocolate

    Sharing Chocolate Chocolate in its many forms is enjoyed by millions of people around the world ever ...

  3. input输入框数字转带千分位的字符串

    数字转带千分位的字符串 思路 先获取要转换的数字,对其进行分割 小数部分具体需要保留多少位,具体处理 整数部分用正则做替换 将小数部分和整数部分合计 代码 注意: 本文是基于 jQuery 写的,稍稍 ...

  4. HTMl中Meta标签和meta property=og标签含义

    meta是head区的一个辅助性标签.其主要作用有:搜索引擎优化(SEO),定义页面使用语言,自动刷新并指向新的页面,实现网页转换时的动态效果,控制页面缓冲,网页定级评价,控制网页显示的窗口等! me ...

  5. Socket网络编程--初级

    如果想开发一个基于TCP/IP协议的网络程序,应用程序之间则主要通过Socket交换数据 .NET Socket支持四种编程模式 1.居于阻塞模式的Socket编程 2.”非阻塞“模式的Socket编 ...

  6. termios, tcgetattr, tcsetattr, tcsendbreak, tcdrain, tcflush, tcflow, cfmakeraw, cfgetospeed, cfgetispeed, cfsetispeed, cfsetospeed - 获取和设置终端属性,行控制,获取和设置波特率

    SYNOPSIS 总览 #include <termios.h> #include <unistd.h> int tcgetattr(int fd, struct termio ...

  7. hbase报错: hbase.PleaseHoldException: Master is initializing

    查看hbase服务状态报错:   hbase(main)::> status ERROR: org.apache.hadoop.hbase.PleaseHoldException: Master ...

  8. Spring定时任务的几种实现(转)

    转自:http://gong1208.iteye.com/blog/1773177 近日项目开发中需要执行一些定时任务,比如需要在每天凌晨时候,分析一次前一天的日志信息,借此机会整理了一下定时任务的几 ...

  9. linux netstat 统计连接数查看外部(转)

    转自:http://boy-liguang.blog.sohu.com/187052443.html linux netstat 统计连接数查看外部 2011-10-11 08:52阅读(16333) ...

  10. java中有几种方法可以实现一个线程?用什么关键字修饰同步方法? stop()和suspend()方法为何不推荐使用?

    有两种实现方法,分别是继承Thread类与实现Runnable接口用synchronized关键字修饰同步方法反对使用stop(),是因为它不安全.它会解除由线程获取的所有锁定,而且如果对象处于一种不 ...