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

.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. docker--build base image

    通过dockerfile build一个base image,在上面运行一个c程序 首先 1.创建一个目录. 2.然后创建一个c写的小程序,并且gcc编译好. 3.创建一个Dockerfile FRO ...

  2. 完全卸载win10上的Ubuntu子系统 - Windows Subsystem for Linux(WSL)

    Ctrl + R 键入: lxrun /uninstall /full 具体请看 microsoft的说明:Frequently Asked Questions

  3. tar 和gzip 的区别

    首先要 弄清两个概念:打包和压缩. 打包是指将一大堆文件或目录什么的变成一个总的文件, 压缩则是将一个大的文件通过一些压缩算法变成一个小文件. 为什么要区分这两个概念呢?其实这源于Linux中的很多压 ...

  4. nginx + gunicorn + django 2.0 踩坑

    部署踩坑 部署踩坑提前准备服务器端准备安装nginx使用uwsgi部署使用gunicorn配置配置nginx配置django中的路径url 提前准备 在本地能够 python(3) manage.py ...

  5. 2018-8-10-win10-uwp-DataContext-

    title author date CreateTime categories win10 uwp DataContext lindexi 2018-08-10 19:16:53 +0800 2018 ...

  6. 关于KiCAD的一些插件

    关于KiCAD的一些插件 https://gitee.com/KiCAD-CN/KiCad-CN-Forum/blob/master/KiCad_help_zh_CN.md#swapit-%E5%B7 ...

  7. vue 初始化rem

    在assets => js => rem.js export default { init () { let sw = document.documentElement.clientWid ...

  8. Ubuntu系统管理systemd

    systemctl命令 systemctl list-units - 列出所有jobs/serviceList all units (where unit is the term for a job/ ...

  9. vue项目base64转img

    最近一个vue项目中,有个需求是, 发送消息是base64时,转换成图片预览发送出去. 输入框: <el-input class="input-box" ref=" ...

  10. go声明和初始化

    go声明和初始化 当我们第一次看见变量和声明时,我们仅仅看见一些内置的类型,比如整型和字符串.现在我们将学习结构体,并且我们会深入学习包括指针的内容. 通过一种最简单的方式去创建一个结构体值类型: g ...