※ 引述《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> 則不會。