为什么我需要这么多代码来实现简单的 CSS 渐变？答案

【问题标题】：Why do I need so much code for a simple CSS gradient?为什么我需要这么多代码来实现简单的 CSS 渐变？
【发布时间】：2016-07-18 00:46:53
【问题描述】：

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

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

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 */
}

&lt;div class="myQuestion"&gt;&lt;/div&gt;

【问题讨论】：

叫做历史
Why use specific vendor prefixes instead of one representing all browsers的可能重复
顺便说一句，旧的 webkit 语法丢失了：-webkit-gradient(linear, left top, left bottom, color-stop(0%,#7d7e7d), color-stop(100%,#0e0e0e))，我想。

标签： css

【解决方案1】：

那是因为渐变很复杂。

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

不过，渐变的定义要晚得多，在 CSS3 中。此外，语法多次更改。行为也发生了变化。最近，有些人仍在争论要更改插入色标的颜色空间（考虑到透明度时，这并不明显）。

然后，很多人不更新他们的浏览器。所以他们被这些初步的实现所困。

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

【讨论】：

那么将来可能会有“已定义”的渐变语法吗？
@r553 linear-gradient(to bottom, #7d7e7d, #0e0e0e) 是正确的语法之一。对于兼容的浏览器应该足够了。但不适用于旧浏览器。