PRI_20140604135449

このような、グラデーション背景を作る際に、FirefoxとGoogleChromeについてはコードが出回っているものの、IEについては古い情報しかなく(IE8までに対応させる方法)、IE10・11などに対応させる方法が出回っていなかったので、メモしておきます。

/* 丸みを帯びさせるコード */

.fourcorners{
border-radius: 15px;
}

/* グラデーション */

.inner{
background:-moz-linear-gradient(top, #898682, #1e1d1b); /* Firefox */
background:-webkit-linear-gradient(top, #898682, #1e1d1b);/* safari Chrome */
background:-ms-linear-gradient(top, #898682, #1e1d1b); /* IE */
padding-top:150px;
width:300px;
}

 

<div class=”fourcorners inner”></div>

 

赤字のものを追加してやると、IEでもグラデーションが表示されるようになります。

background:-moz-linear-gradient(top, #898682, #1e1d1b); の moz を ms に書き換えたものを追加するだけです。

H26年6月7日追記

/* 丸みを帯びさせるコード */

.fourcorners{
border-radius: 15px;
}

/* グラデーション */

.inner{
background:-moz-linear-gradient(top, #898682, #1e1d1b); /* Firefox */
background:-webkit-linear-gradient(top, #898682, #1e1d1b);/* safari Chrome */
background:linear-gradient(to bottom, #898682, #1e1d1b); /* IE */
padding-top:150px;
width:300px;
}

でもOKとのことです。

参考:http://me.hateblo.jp/entry/20120815/1345035360

 

スポンサー

お問い合わせ

この記事についてご質問があれば、お問い合わせ下さい。

お名前(必須)
お名前フリガナ(必須)
メールアドレス(必須)
メールアドレス確認(必須)
お問い合わせ記事URL
お問い合わせ内容(必須)