itoigawabass
itoigawaのブログ
cssメモ
2013-05-22
IE10のグラデーション
このサイトのボタンCSS3でグラデーションを表現してるがIEだけ出来ていなかった。
background: -webkit-gradient(linear, left top, left bottom, from(#f6f6f6), to(#d4d4d4)); /* Safari Chrome */ background: -webkit-linear-gradient(#f6f6f6, #d4d4d4); /* Chrome safari */ background-image: -moz-linear-gradient(top, #f6f6f6, #d4d4d4); /* Firefox */ background-image: -moz-gradient(top, #f6f6f6, #d4d4d4); /* Firefox */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f6f6', endColorstr='#d4d4d4',GradientType=0 ); /* ie5.5 */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#f6f6f6', endColorstr='#d4d4d4')"; /* ie8 */ background-image: -ms-linear-gradient(#f6f6f6, #e4e4e4, #d4d4d4); /* ie10 */ background: -o-linear-gradient(#f6f6f6, #d4d4d4); /* Opera */example
#example1 {
/* fallback */
background-color: #063053;
/* chrome 2+, safari 4+; multiple color stops */
background-image:-webkit-gradient(linear, left bottom, left top, color-stop(0.32, #063053), color-stop(0.66, #395873), color-stop(0.83, #5c7c99));
/* chrome 10+, safari 5.1+ */
background-image: -webkit-linear-gradient(#063053, #395873, #5c7c99);
/* firefox; multiple color stops */
background-image: -moz-linear-gradient(top,#063053, #395873, #5c7c99);
/* ie 6+ */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#063053', endColorstr='#395873');
/* ie8 + */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#063053', endColorstr='#395873')";
/* ie10 */
background-image: -ms-linear-gradient(#063053, #395873, #5c7c99);
/* opera 11.1 */
background-image: -o-linear-gradient(#063053, #395873, #5c7c99);
/* The "standard" */
background-image: linear-gradient(#063053, #395873, #5c7c99);
}
カテゴリー：css
タグ：
