CSS3漸變多個瀏覽器

我有這個CSS線性漸變在Firefox中工作，似乎無法得到相同的結果，以在Safari和其他瀏覽器中工作。它的背景爲聯繫人字段。我已經嘗試過整個身體和一個特定的元素，而且這種風格似乎只適用於Firefox。嘗試使用-webkit和-moz，但沒有運氣。有任何想法嗎？CSS3漸變多個瀏覽器

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; 
}

來源

2012-12-11 wild hawk

請嘗試使用此工具：http://www.colorzilla.com/gradient-editor/ – 3dgoo

我已經看過，但那不是我所需要的。 Webkit支持background-image線性漸變嗎？ –

如果您再次查看該網站，則可能會看到它回答了您的問題。或者，也許這個網頁可能有助於解釋哪些瀏覽器支持什麼：http://caniuse.com/css-gradients – 3dgoo

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

資源

來源

2012-12-11 04:51:35 3dgoo

我真的想要左邊的藍線，但現在這將工作...將繼續嘗試。 –

在這裏，你走了，因爲CSS一個完整的跨瀏覽器的CSS漸變

background: #1e5799; /* Old browsers */ 
/* IE9 SVG, needs conditional override of 'filter' to 'none' */ 
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzFlNTc5OSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM3ZGI5ZTgiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); 
background: -moz-linear-gradient(top, #1e5799 0%, #7db9e8 100%); /* FF3.6+ */ 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */ 
background: -webkit-linear-gradient(top, #1e5799 0%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */ 
background: -o-linear-gradient(top, #1e5799 0%,#7db9e8 100%); /* Opera 11.10+ */ 
background: -ms-linear-gradient(top, #1e5799 0%,#7db9e8 100%); /* IE10+ */ 
background: linear-gradient(to bottom, #1e5799 0%,#7db9e8 100%); /* W3C */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0); /* IE6-8 */

Source

至於你的答案去，這是一個無效的語法

linear-gradient(90deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px), 
linear-gradient(#eee .1em, transparent .1em);

來源

2012-12-11 03:51:32

我從這個網站的源代碼[link]（http://lea.verou.me/css3patterns/#lined - 紙） –

微軟提供了這個簡單的工具來生成支持跨瀏覽器的梯度：http://ie.microsoft.com/testdrive/graphics/cssgradientbackgroundmaker/default.html

來源

2012-12-11 03:54:47

CSS3漸變多個瀏覽器

回答

相關問題