0

私のボタンはChromeがこのように表示されています。

これが私が欲しいものです。

ただし、Firefox では、次のように表示されます。

.mainButton_grey { 
  border: 1px solid BFBFBF; 
  background: -webkit-linear-gradient(top,#DBDBDB,#D1D1D1);
  padding-top:7px;
  text-align:center;
  cursor:pointer;
  width:200px;
  height:22px;
  border-radius:3 3;
  background-color:#0972BD; 
  font-size:11px; 
  font-weight:bold; 
  font-family:Arial;
  color:#404040;
 }

ここでJsfiddle。

4

3 に答える 3

2

その理由は、線形グラデーションを次のように定義していないためです。

-moz-linear-gradient(top, #DBDBDB, #D1D1D1);

構文は少し異なる場合があります。ただし、ブラウザごとにグラデーションを解釈する方法が異なります。

各ブラウザでのグラデーションの例を次に示します。

background: rgb(245,246,246); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(245,246,246,1) 0%, rgba(219,220,226,1) 21%, rgba(184,186,198,1) 49%, rgba(221,223,227,1) 80%, rgba(245,246,246,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(245,246,246,1)), color-stop(21%,rgba(219,220,226,1)), color-stop(49%,rgba(184,186,198,1)), color-stop(80%,rgba(221,223,227,1)), color-stop(100%,rgba(245,246,246,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(245,246,246,1) 0%,rgba(219,220,226,1) 21%,rgba(184,186,198,1) 49%,rgba(221,223,227,1) 80%,rgba(245,246,246,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(245,246,246,1) 0%,rgba(219,220,226,1) 21%,rgba(184,186,198,1) 49%,rgba(221,223,227,1) 80%,rgba(245,246,246,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(245,246,246,1) 0%,rgba(219,220,226,1) 21%,rgba(184,186,198,1) 49%,rgba(221,223,227,1) 80%,rgba(245,246,246,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(245,246,246,1) 0%,rgba(219,220,226,1) 21%,rgba(184,186,198,1) 49%,rgba(221,223,227,1) 80%,rgba(245,246,246,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f6f6', endColorstr='#f5f6f6',GradientType=0 ); /* IE6-9 */

うまくいけば、それがお役に立てば幸いです。

于 2012-12-01T01:52:16.957 に答える
2

グラデーションに関するアドバイス - 可能な限り多くのブラウザー互換性が必要な場合は、次を追加します (値を変更するだけです)。

background: -moz-linear-gradient(black, white); /* FF 3.6+ */  
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #000000), color-stop(100%, #ffffff)); /* Safari 4+, Chrome 2+ */  
background: -webkit-linear-gradient(black, white); /* Safari 5.1+, Chrome 10+ */  
background: -o-linear-gradient(black, white); /* Opera 11.10 */  
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#ffffff'); /* IE6 & IE7 */  
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#ffffff')"; /* IE8+ */  
background: linear-gradient(black, white); /* the standard fallback for old browsers */

ここでの構文説明: http://www.impressivewebs.com/css3-linear-gradient-syntax/

そして、素晴らしいグラデーション ジェネレーターがここにあります: http://www.colorzilla.com/gradient-editor/

于 2012-12-01T01:50:35.413 に答える
1

三つのこと：

  1. このサイトからグラデーション CSS を取得します: http://www.colorzilla.com/gradient-editor/
  2. 単位を指定するには、border-radius を更新しますborder-radius: 3px 3px。
  3. 境界線の色の宣言に追加#します。border: 1px solid #BFBFBF;
于 2012-12-01T01:48:10.670 に答える