CSS3多个浏览器的渐变 [英] CSS3 Gradient for multiple browsers

问题描述

我有这个CSS线性渐变在Firefox中工作，似乎不能得到相同的结果，在Safari和其他浏览器中工作。它的一张纸像背景的联系人字段。我试过整个身体和一个特定的元素和风格似乎只能在Firefox中工作。尝试使用-webkit-和-moz-但没有运气。任何想法？

  textarea {
 background-color：#fff; 
 background-image：
线性梯度（90deg，透明79px，＃abced4 79px，＃abced4 81px，透明81px），
线性渐变（#eee .1em，transparent .1em） ; 
 background-size：100％1.2em; 
 display：block; 
 resize：none; 
} 
  

解决方案

strong>

  textarea {
 background-color：#ffffff; 
 background-image：
 -moz-linear-gradient（left，rgba（0，0，0，0）79px，＃abced4 79px，＃abced4 81px，rgba（0，0，0，0 ）81px），
 -moz-linear-gradient（top，#eeeeee .1em，rgba（0，0，0，0）.1em）; 
 background-image：
 -webkit-gradient（linear，left top，right top，color-stop（79px，rgba（0，0，0，0）），color-stop（79px， abced4），color-stop（81px，＃abced4），color-stop（81px，rgba（0，0，0，0））），
 -webkit-gradient（linear，left top，left bottom，color -stop（.1em，#eeeeee），color-stop（0.1em，rgba（0，0，0，0）））; 
 background-image：
 -webkit-linear-gradient（left，rgba（0，0，0，0）79px，＃abced4 79px，＃abced4 81px，rgba（0，0，0，0 ）81px），
 -webkit-linear-gradient（top，#eeeeee .1em，rgba（0，0，0，0）0.1em）; 
 background-image：
 -o-linear-gradient（left，rgba（0，0，0，0）79px，＃abced4 79px，＃abced4 81px，rgba（0，0，0，0 ）81px），
 -o-linear-gradient（top，#eeeeee .1em，rgba（0，0，0，0）.1em）; 
 background-image：
 -ms-linear-gradient（left，rgba（0，0，0，0）79px，＃abced4 79px，＃abced4 81px，rgba（0，0，0，0 ）81px），
 -ms-linear-gradient（top，#eeeeee .1em，rgba（0，0，0，0）.1em）; 
 background-image：
 linear-gradient（to right，rgba（0，0，0，0）79px，＃abced4 79px，＃abced4 81px，rgba（0，0，0，0）81px ），
 linear-gradient（to bottom，#eeeeee .1em，rgba（0，0，0，0）.1em）; 
 background-size：100％1.2em; 
} 
  

演示

资源 b

• http://www.colorzilla.com / gradient-editor /


• http://caniuse.com / css-gradient

I have this CSS linear gradient working in Firefox and can't seem to get the same result to work in Safari and other browsers. its a paper like background for a contact field. I Have tried the whole body and a specific element and the style seems to only work in Firefox. Tried using the -webkit- and the -moz- but no luck. Any ideas?

textarea {
    background-color: #fff; 
    background-image: 
        linear-gradient(90deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px),
        linear-gradient(#eee .1em, transparent .1em);
    background-size: 100% 1.2em;
    display: block;
    resize: none;
}

解决方案

CSS

textarea {
    background-color: #ffffff;
    background-image: 
        -moz-linear-gradient(left, rgba(0, 0, 0, 0) 79px, #abced4 79px, #abced4 81px, rgba(0, 0, 0, 0) 81px), 
        -moz-linear-gradient(top, #eeeeee .1em, rgba(0, 0, 0, 0) .1em);
    background-image: 
        -webkit-gradient(linear, left top, right top, color-stop(79px, rgba(0, 0, 0, 0)), color-stop(79px, #abced4), color-stop(81px, #abced4), color-stop(81px, rgba(0, 0, 0, 0))), 
        -webkit-gradient(linear, left top, left bottom, color-stop(.1em, #eeeeee), color-stop(.1em, rgba(0, 0, 0, 0)));
    background-image: 
        -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 79px, #abced4 79px, #abced4 81px, rgba(0, 0, 0, 0) 81px), 
        -webkit-linear-gradient(top, #eeeeee .1em, rgba(0, 0, 0, 0) .1em);
    background-image: 
        -o-linear-gradient(left, rgba(0, 0, 0, 0) 79px, #abced4 79px, #abced4 81px, rgba(0, 0, 0, 0) 81px), 
        -o-linear-gradient(top, #eeeeee .1em, rgba(0, 0, 0, 0) .1em);
    background-image: 
        -ms-linear-gradient(left, rgba(0, 0, 0, 0) 79px, #abced4 79px, #abced4 81px, rgba(0, 0, 0, 0) 81px), 
        -ms-linear-gradient(top, #eeeeee .1em, rgba(0, 0, 0, 0) .1em);
    background-image: 
        linear-gradient(to right, rgba(0, 0, 0, 0) 79px, #abced4 79px, #abced4 81px, rgba(0, 0, 0, 0) 81px), 
        linear-gradient(to bottom, #eeeeee .1em, rgba(0, 0, 0, 0) .1em);
    background-size: 100% 1.2em;
}

Demo

Resources

• http://www.colorzilla.com/gradient-editor/
• http://caniuse.com/css-gradients

这篇关于CSS3多个浏览器的渐变的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！