html - Internet Explorer 中的渐变颜色

Question

我知道 Internet Explorer 有一些专有扩展，因此您可以执行诸如创建具有渐变背景的 div 之类的操作。我不记得元素名称或它的用法。有没有人有一些例子或链接？

Answer 1

我用于所有浏览器渐变的代码:

background: #0A284B;
background: -webkit-gradient(linear, left top, left bottom, from(#0A284B), to(#135887));
background: -webkit-linear-gradient(#0A284B, #135887);
background: -moz-linear-gradient(top, #0A284B, #135887);
background: -ms-linear-gradient(#0A284B, #135887);
background: -o-linear-gradient(#0A284B, #135887);
background: linear-gradient(#0A284B, #135887);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0A284B', endColorstr='#135887');
zoom: 1;

您需要指定高度或 zoom: 1 以将 hasLayout 应用于元素，以便在 IE 中使用。

---

更新:

这是为所有 LESS 用户准备的 LESS Mixin (CSS) 版本:

.gradient(@start, @end) {
    background: mix(@start, @end, 50%);
    filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorStr="@start~", EndColorStr="@end~")";
    background: -webkit-gradient(linear, left top, left bottom, from(@start), to(@end));
    background: -webkit-linear-gradient(@start, @end);
    background: -moz-linear-gradient(top, @start, @end);
    background: -ms-linear-gradient(@start, @end);
    background: -o-linear-gradient(@start, @end);
    background: linear-gradient(@start, @end);
    zoom: 1;
}