Css 什么'；rgba（0,0,0,0）和透明之间的区别是什么？

在中，修复渲染问题的解决方案是使用值

rgba（255，255，255，255）

而不是

透明。

我们使用

rgba（0，0，0，0）

进行测试，这仍然纠正了问题，这意味着导致错误的是

透明的定义。但是，查看
透明
的（和）可以发现
rgba（0,0,0,0）
和
透明
应该相等：

透明

完全透明。此关键字可被视为
透明黑色的缩写，rgba（0,0,0,0），它是其计算值
价值观

那么是什么原因呢？为什么两个看似相同的值会产生不同的结果？我已经研究了RGBA，并寻找了类似的问题（没有用）。每一个提到从
transparent
到
rgba（0,0,0,0）
转换的问题/答案中都有“应该”或“根据”字样。（例如）。实际的差异是什么？为什么它会对输出产生如此大的变化

N.B:大多数（如果不是全部）版本的Internet Explorer都会出现这种情况。我们还知道，它出现在Firefox的某些版本中。然而，Chrome和Safari没有显示这种行为，这让我们相信在
-webkit
中有某种补丁可以解决这个问题


为了能够将其作为bug提交，我们需要使用最少的代码来重现问题。因此，从我的另一个问题转移过来，这里是使用
transparent
与
rgba（0,0,0,0）
的比较，以及当我们同时使用两者时会发生什么

透明的

@关键帧旋转{
0%{变换：旋转（0度）；}
50%{变换：旋转（360度）；边界半径：60%；}
100%{变换：旋转（720deg）；}
}
spinme先生{
显示：内联块；
位置：相对位置；
左：0；
排名：0；
保证金：0.2rem；
宽度：0.8rem；
高度：0.8雷姆；
边框：0.2rem纯黑；
边界半径：0%；
外形：1px实心透明；
变换：旋转（0度）；
动画：旋转无限4s；
}
我一直在尝试您的代码，以获取安装在运行Windows 7操作系统的笔记本电脑上的Chrome中的值
transparent

我自己一点也不摇晃。因此，我认为这个问题是特定于特定浏览器和操作系统的，具体取决于特定浏览器和操作系统决定如何呈现元素

此问题可能与浏览器是否使用硬件加速有关。现在，有一个技巧可以强制浏览器使用硬件加速：让浏览器认为三维变换正在应用于元素

您可以通过向元素添加以下属性来实现这一点：

.fake3Dtransformation {
   -webkit-transform: translate3d(0, 0, 0);
   -moz-transform: translate3d(0, 0, 0);
   -ms-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
  /* Other transform properties here */
}

虽然我不能完全确定这是否会解决使用透明时的抖动问题（因为我无法重现该问题），但从理论上讲，应用这种“黑客”应该总能给您提供最平滑的渲染。有关更多信息，请查看

因此，对于您的演示代码，您将得到以下结果：


@关键帧旋转{
0%{变换：旋转（0度）；}
50%{变换：旋转（360度）；边界半径：60%；}
100%{变换：旋转（720deg）；}
}
#斯宾姆{
-webkit转换：translate3d（0,0,0）；
-moz变换：translate3d（0,0,0）；
-ms变换：translate3d（0,0,0）；
变换：translate3d（0,0,0）；
显示：内联块；
位置：相对位置；
左：0；
排名：0；
保证金：0.2rem；
宽度：0.8rem；
高度：0.8雷姆；
边框：0.2rem纯黑；
边界半径：0%；
轮廓：1px实心rgba（0,0,0,0）；
动画：旋转无限4s；
}
#spinme:n类型（2）{
外形：1px实心透明；
}
在我看来，两次使用同一个id是不好的，无论你在做什么，它都是一个标识符。
我也不觉得它们都显示动画很奇怪，因为它们都有相同的id，与css中的
动画
匹配

#spinme{
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    display:inline-block;
    position:relative;
    left:0;
    top:0;
    margin:0.2rem;
    width:0.8rem;
    height:0.8rem;
    border:0.2rem solid black;
    border-radius:0%;
    outline: 1px solid rgba(0,0,0,0);
    transform:rotateZ(0deg);

}

#spinme:nth-of-type(1){
    animation: spin infinite 4s;
}

如果你这样做，只有一个摆动，这对我来说非常有意义。
也许它没有回答你关于透明问题的问题，但我不确定这是否真的是问题所在

编辑
无论我尝试哪种颜色，
transparent
或
rgba（0,0,0,0）
都可以在Safari上以任意组合进行动画制作。
rgba（）是一个计算项目颜色和透明度的函数，当您想要控制项目的颜色和alpha时，它非常有用，特别是当您不想完全透明时。作为一个函数，你告诉浏览器你想要画什么颜色和透明度，这比CSS更接近JS

另一方面，“透明”是一个CSS属性，它标识一个项目将是完全透明的，而不需要计算颜色和alpha。作为一个CSS属性而不是一个函数，每个浏览器都以不同的方式应用它，因此浏览器应用此属性所使用的方法会有很大不同

编辑
好吧，你说我在回答中反驳了这一点：

透明的

完全透明。这个关键字可以看作是
透明黑色，rgba（0,0,0,0），这是它的计算值

好吧，我不否认这一点。一件事是W3C标准的规范，另一件事是不同浏览器的开发人员对该标准的实现。我不会破坏IE的代码来证明我所说的，因为这有点违法，直接让微软的人看看他们的答案

我告诉过你的是，它们是不以相同方式处理透明和rgba（0，0，0，0）的浏览器。这是因为transparent属性比rgba（0，0，0，0）函数旧得多（您喜欢它胜过rgba（）？），而且最有可能的是，IE开发了一种有效的rgba方法