我正在扫描一些样式表时发现其中使用了linear-gradient
with rgba()
颜色停止点,其中rgba
数字使用了多个实例0而不是只有一个0:
background-image:linear-gradient(to top left, rgba(000,000,000,0.1),rgba(100,100,100,1));
我之前没有见过多个零(而不是单个零)占据 rgb/a 颜色空间中的单个插槽,但在 CodePen 上确认这是有效的。然后我查阅了 W3C 的定义number here https://www.w3.org/TR/css3-values/#number.
长话短说,经过更多的探索和挖掘,我没有意识到我可以在length并获得与没有前置零相同的结果,如下所示:
/* The two squares generated have equivalent width and height of 100px - for giggles, I also extended the same idea to the transition-duration time */
<style>
div.aaa {
width:00000000100px;
height:100px;
background-image:linear-gradient(to top left,rgba(000,000,000,0.1),rgba(100,100,100,1));
transition:1s cubic-bezier(1,1,1,1)
}
div.bbb {
width:100px;
height:000000000000000000000000000000000100px;
background-color:green;
transition:0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000001s cubic-bezier(1,1,1,1)
}
div:hover { background-color:red }
</style>
<div class="aaa"></div>
<div class="bbb"></div>
直接验证这些数字是否等效表示很困难,因为使用脚本语言:
/* PHP */
$x = 100;
$y = 00000000000100; // problem is PHP treats this as an octal number
echo ($x == $y) ? 'true' : 'false'; // echoes the string ---> false
/* Javascript */
var x = 100;
var y = 00000000000100; // also treats this as an octal number
var res = (x == y) ? 'true' : 'false';
alert(res); // alerts ---> false
这些例子向我表明 CSS 不处理例如0000100 作为八进制数,而是作为十进制数(或至少作为非八进制数),因为width
, height
, and transition-duration
因为上面生成的 html 元素看起来是相同的。
将此 CSS 方法扩展到任何属性和任何单元,例如,time,
任何包含单位的 CSS 属性值在语法上是否等同于没有任何前缀零的相同值?