Question

我有点好奇为什么我需要这么多不同的CSS代码行来使我的渐变与大多数浏览器兼容。这不应该是普遍存在的东西吗？

如果我错了，请纠正我，但如果这个简单的事情不是普遍的话，我很惊讶我们不需要浏览器特定的字体大小，填充，边距等代码。

＆＃13;

font-family

＆＃13;

div.myQuestion {
    width: 250px;
    height: 100px;
    background: #7d7e7d;
    /* Old browsers */
    background: -moz-linear-gradient(top, #7d7e7d 0%, #0e0e0e 100%);
    /* FF3.6-15 */    
    background: -webkit-linear-gradient(top, #7d7e7d 0%, #0e0e0e 100%);
    /* Chrome10-25,Safari5.1-6 */    
    background: linear-gradient(to bottom, #7d7e7d 0%, #0e0e0e 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */    
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e', GradientType=0);
    /* IE6-9 */
}

＆＃13;

Answer 1

那是因为渐变很复杂。

您不需要填充和边距的前缀，因为它们是在CSS 2.1中定义的，并且非常简单。

然而，在CSS3中，渐变定义要晚得多。而且，语法多次改变。行为也发生了变化。有些人最近还在争论改变颜色停止的颜色空间（当你考虑透明度时，它并不明显）。

然后，很多人不更新他们的浏览器。所以他们坚持这些初步实施。

现在大多数浏览器都意识到供应商前缀是一场噩梦，他们决定避免将它们用于新属性。

为什么我需要这么多代码才能获得简单的CSS渐变？

1 个答案: