※ 引述《kisha024 (4545454554)》之铭言：
: 大家好
: https://jsfiddle.net/apfjd18m/
: 我有三个div 都有设定transition
: 第一个div hover时，会立即变化(没有transition效果)
: 第二个div hover前 有设定border-image-outset hover时有transition效果
: 第三个div hover前 并没有设定padding-right 而hover时也有transition效果
: 我的疑问在于 既然 border-image-outset 和 padding-right 的默认都是0
: 为什么hover前 border-image-outset要设定 而padding-right却不用呢？
: 谢谢
(1) div1、div2 行为不同的原因
根据 border-image-outset 在 MDN 上的资讯，
它的 "computed value" 是 "as specified"，
且 "animation type" 是 "by computed value type"，
表示 transition 时会直接用当下的数值型态进行内插。
https://i.imgur.com/XnV8I0c.png
问题是 border-image-outset 本身支援两种数值型态：
<number> (无单位，如 0、1.5)
<length> (有单位，如 0px、1.5rem)
div1 初始状态是默认值的 0，
div2 初始状态则是你设定的 0px，
两者并不是等效的。
从 transition 的角度来看，
一个是 <number> → <length> (0 → 20px)，
另一个则是 <length> → <length> (0px → 20px)，
因此只有 div2 能正确内插过程。
这件事跟它是默认值还是使用者设定的数值无关，
只看开始跟结束的数值型态是否相符，
所以如果你把 div2 的 0px 改成 0，
它一样会失效。
(2) div3 不受影响的原因
padding-right 本身也支援两种数值型态：
<length>
<percentage> (需加 %，如 1.5%)
但它的 "animation type" 是 "a length"，
表示不管你设定是用哪一种，
最后都会转换成 <length> 之后才进行内插，
不会有型态不相符的问题。
https://i.imgur.com/jxXZyz6.png
另外，
有人可能会疑惑 padding-right 支援的数值型态并不包含 <number>，
那为何 MDN 上的默认值仍然写 0 而非 0px 或 0%。
根据 W3C 的规范，
<length> 为 0 时其单位是可省略的，
但如果该 property 同时支援 <length> 跟 <number>，
则会优先解释为 <number>。
https://i.imgur.com/tEsIEU3.png
这也是为什么大部份 CSS property 不太需要区分 0 跟 0px，
但在 border-image-outset 的例子就需要。
当然这规则只适用 0，
若用其他非 0 的数字都会被浏览器视为 invalid 而直接忽略。
https://i.imgur.com/k8YPKOp.png
(3) 额外补充
在 (1) 的说明中，
另一种可行的作法是改用 <number> → <number>，
例如把 div1 的 20px 改成 20。
但如果你实际测试，
会发现它反而变成完全不会动的状态，
这是因为当数值型态为 <number> 时，
它代表的意义为 border-width 的倍数。
https://i.imgur.com/9S4sZV7.png
然而，
当 border-style 为 "none" 或 "hidden" 时，
不管 border-width 的设定值为多少，
其 "computed value" 都会被强制变为 0，
导致乘上任何倍数都还是 0，
自然就不会有任何动作。
https://i.imgur.com/N1QXOgv.png
所以若要用 <number> 的写法，
还要先将 border-style 改为非上面两种值才行，
如以下连结的 div4、div5 所示。
https://jsfiddle.net/7tr1fm93/
也就是说 <number> → <number> 会跟 border-width 挂勾，
<length> → <length> 则不会。