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

.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. HBase版本进化史及大版本特性

    HBase 2.0 新特性介绍 2018年4月30日HBase发布了2.0的Release版本.HBase的2.0版本承载了太多的Features,共包含4551个Issues,可以说是迄今最大的一个 ...

  2. uvloop官网翻译

    魔术堆栈 uvloop:快速的Python网络连接 作者Yury Selivanov @ 1st1 2016年5月3日 TL; DR asyncio是Python标准库附带的异步I / O框架.在此博 ...

  3. shiro安全框架的使用流程

    最近学了shiro安全框架流程,在这里梳理一下shiro的工作流程和一些代码,方便以后使用的时候,能快速找到对应的代码. 要使用这个shiro框架,还要新建两张表 t_authority(权限表)和t ...

  4. myeclipse 报错:Set project compiler compliance settings to '1.5'

    myeclipse 报错:Set project compiler compliance settings to '1.5' 解决方法:项目右击-->properties-->java c ...

  5. TCP建立连接的三次握手和释放连接的四次挥手

    TCP建立连接时,为什么要进行三次握手? 举个打电话的例子: A : 你好我是A,你听得到我在说话吗 B : 听到了,我是B,你听到我在说话吗 A : 嗯,听到了 建立连接,开始聊天! 第一次握手 第 ...

  6. 【LeetCode】二分

    [475] Heaters [Easy] 给你一排房子,一排加热器.找到能warm所有房子的最小加热器半径. 思路就是对于每个房子,找离它最近的左右两台heater, 分别求距离.温暖这个房子的hea ...

  7. bypass_safedog

    1.SQL注入 手工bypass要点 先通过破坏关键字测试出拦截规则 之后进行针对性绕过 1.Mysql 1.1.联合注入 0x01 and绕过 直接 and 1=1 直接就会被拦截 在数值的前面加特 ...

  8. Uninstall NetBeans

    There will be a file named uninstall.sh in /usr/local/netbeans-x.x if you installed netbeans with ro ...

  9. Vue学习笔记【6】——事件修饰符

    .stop 阻止冒泡(阻止事件向外层冒泡) .prevent 阻止默认事件(链接跳转.表单提交) .capture 添加事件侦听器时使用事件捕获模式(从外到里触发事件) .self 只当事件在该元素本 ...

  10. Java实体与Json操作类

    import com.fasterxml.jackson.core.JsonProcessingException; import com.fasterxml.jackson.databind.Jav ...