0

このCSS線形グラデーションはFirefoxで機能していますが、Safariや他のブラウザで同じ結果が得られないようです。接触フィールドの背景のような紙です。全身と特定の要素を試しましたが、スタイルはFirefoxでのみ機能するようです。-webkit-と-moz-を使用してみましたが、うまくいきませんでした。何か案は？

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

3 に答える 3

1

さあ、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 */

ソース

あなたの答えが行く限り、これは無効な構文です

linear-gradient(90deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px),
linear-gradient(#eee .1em, transparent .1em);
于 2012-12-11T03:51:32.047 に答える
1

Microsoftは、クロスブラウザーをサポートするグラデーションを生成するためのこのシンプルなツールを提供しました：http：//ie.microsoft.com/testdrive/graphics/cssgradientbackgroundmaker/default.html

于 2012-12-11T03:54:47.450 に答える
1

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

デモ

資力

于 2012-12-11T04:51:35.597 に答える