css - CSS でグラデーションを作成する最も簡単なクロスブラウザー対応の方法は何ですか?

Question

これがサービスで使用されていることに気付きました。その効果は非常に優れています

-moz-linear-gradient(center top , #E3EBF3, #D5E1ED) repeat scroll 0 0 transparent

Answer 1

質問のように CSS プロパティを使用します。、プレフィックスを追加して-mozから、-webkitプレフィックスなしで使用します。

IE のfilterプロパティはグラデーションを行うことができます。それは適切ですが、機能します:)

Answer 2

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

有効な HTML と CSS を提供し、必要なものにハックとプロパティを提供できるように、modernizr と if IE ブロックを上部に使用して html タグにクラスを追加します。

たとえば、私が過去に使用したグラデーションでは次のようになります。

body {
background: #2688cf;
}
.cssgradients body{
background: -moz-linear-gradient(top, #2688cf 0%, #2989d8 12%, #207cca 14%, #62a2d6 18%, #b9d5ea 28%, #ffffff 40%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2688cf), color-stop(12%,#2989d8), color-stop(14%,#207cca), color-stop(18%,#62a2d6), color-stop(28%,#b9d5ea), color-stop(40%,#ffffff));
background: -webkit-linear-gradient(top, #2688cf 0%,#2989d8 12%,#207cca 14%,#62a2d6 18%,#b9d5ea 28%,#ffffff 40%);
background: -o-linear-gradient(top, #2688cf 0%,#2989d8 12%,#207cca 14%,#62a2d6 18%,#b9d5ea 28%,#ffffff 40%);
background: linear-gradient(top, #2688cf 0%,#2989d8 12%,#207cca 14%,#62a2d6 18%,#b9d5ea 28%,#ffffff 40%);
}

.ie6 body, .ie7 body, .ie8 body, .ie9 body {
background: -ms-linear-gradient(top, #2688cf 0%,#2989d8 12%,#207cca 14%,#62a2d6 18%,#b9d5ea 28%,#ffffff 40%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2688cf', endColorstr='#ffffff',GradientType=0 );
background: linear-gradient(top, #2688cf 0%,#2989d8 12%,#207cca 14%,#62a2d6 18%,#b9d5ea 28%,#ffffff 40%);
}