很多時候我們使用 CSS 漸變色來美化網站界面,可是當我們在 IE 瀏覽器測試時,卻發現漸變色不生效。
這是因為 IE 瀏覽器不支持為漸變色屬性添加前綴。
background: linear-gradient(to right, #ff6699, #ff4d4d); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff6699', endColorstr='#ff4d4d', GradientType=1 ); /* IE6-9 */
上述代碼中,我們在 background 屬性中使用了漸變色,而在 IE 中,我們需要在 filter 屬性中添加一個 progid:DXImageTransform.Microsoft.gradient 的前綴來實現漸變色。
需要注意的是,IE 在使用漸變色時,顏色值需要使用十六進制表示法,而不是 RGB 或者 RGBA。
如果你想要兼容 IE 和其他現代瀏覽器,可以這樣寫:
background: #ff6699; /* fallback */ background: linear-gradient(to right, #ff6699, #ff4d4d); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff6699', endColorstr='#ff4d4d', GradientType=1); /* IE6-9 */
這樣,當 IE 不支持漸變色時,會自動使用 background 的顏色值作為背景色,滿足兼容性需求。