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

.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. 字符串连接之“+”和append

    在解决这个问题之前,需要了解的内容: 1.String是只读字符串,即String引用的字符串内容是不可改变的. 1 String s1 = "abc"; 2 s1 = " ...

  2. 关于document.body.scrollTop用法

    网页可见区域宽: document.body.clientWidth;网页可见区域高: document.body.clientHeight;网页可见区域宽: document.body.offset ...

  3. Django中的缓存机制

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

  4. 利用单选框的单选特性作tab切换

    <RadioGroup v-model="selectType" type="button" @onchange="selectTypeChan ...

  5. 用dialog包制作窗口

    #!/bin/bash temp=$(mktemp -t test.XXXXXX) temp2=$(mktemp -t test.XXXXXX) function diskspace { df -k ...

  6. 用IDEA打可运行的jar包

    今天,需要将一个定时项目打成jar包,直接放在服务器上运行,看了一下要求是将依赖包几种放到lib文件夹下,以前都是用maven来打包的.这一次想利用idea直接打包. 但是打完包后运行发现一直缺失ma ...

  7. Redis Desktop Manager连接Redis 遇到的一系列问题

    最近在做一个土地项目的后台,主要是一个信息采集调查系统,使用的框架是: * 核心框架:Spring Framework 4.2 * 日志管理:SLF4J 1.7.Log4j 1.2 * 视图框架:Sp ...

  8. JS对象 屏幕分辨率的高和宽 window.screen 对象包含有关用户屏幕的信息。 1. screen.height 返回屏幕分辨率的高 2. screen.width 返回屏幕分辨率的宽

    屏幕分辨率的高和宽 window.screen 对象包含有关用户屏幕的信息. 1. screen.height 返回屏幕分辨率的高 2. screen.width 返回屏幕分辨率的宽 注意: 1.单位 ...

  9. KiCAD差分布线

    KiCAD差分布线方法 KiCAD在进行差分布线的时候,会自动按照网路名称生成差分对,所以差分对的名称必须是以_P_N或+/-结束,这样才能找到一对差分对,比如说CAN网络,可以定义为CAN_P/CA ...

  10. NFS(网络文件系统)

    NFS(网络文件系统) 1.关于NFS介绍 1.1NFS在企业中的应用场景 在企业集群架构的工作场景中,NFS网络文件系统一般被用来存储共享视频,图片,附件等静态资源文件,通常网站用户上传的文件都会放 ...