Autoprefixer可以用简单的颜色替换线性渐变,不支持渐变吗?

时间:2016-09-05 14:11:57

标签: css css3 linear-gradients autoprefixer postcss


有这个:

style.scss:

.example {
    background: linear-gradient(to top, #45678a, #ab4563);
}

gulpfile.js:

var gulp = require('gulp');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');

gulp.task('sass', function(){
  return gulp.src('scss/*.scss')
    .pipe(sass({
        outputStyle: 'expanded',
    }))
    .pipe(autoprefixer({
        browsers: ['> 0%'], cascade: false
    }))
    .pipe(gulp.dest('css'))
});

得到:

.example {
    background: -webkit-gradient(linear, left bottom, left top, from(#45678a), to(#ab4563));
    background: -webkit-linear-gradient(bottom, #45678a, #ab4563);
    background: -moz-linear-gradient(bottom, #45678a, #ab4563);
    background: -o-linear-gradient(bottom, #45678a, #ab4563);
    background: linear-gradient(to top, #45678a, #ab4563);
}

想要:

.example {
    background: #45678a;
    background: -webkit-gradient(linear, left bottom, left top, from(#45678a), to(#ab4563));
    background: -webkit-linear-gradient(bottom, #45678a, #ab4563);
    background: -moz-linear-gradient(bottom, #45678a, #ab4563);
    background: -o-linear-gradient(bottom, #45678a, #ab4563);
    background: linear-gradient(to top, #45678a, #ab4563);
}

所以我希望背景:#45678a; 以防线性渐变不支持(例如ie8)。
autoprefixer或其他'auto ...'是否可以不写额外的背景属性? 感谢。

0 个答案:

没有答案