※ 引述《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> 则不会。 -- 老实说我也不能 100% 确定这就是根本原因， 毕竟没真的去看底层实作逻辑， 但这是目前结合各项资讯与测试结果後最有可能的推论了。 --

※ 发信站: 批踢踢实业坊(ptt.cc), 来自: 101.137.223.117 (台湾) ※ 文章网址: https://webptt.com/cn.aspx?n=bbs/Web_Design/M.1707378640.A.F72.html ※ 编辑: microloft (101.137.223.117 台湾), 02/08/2024 16:05:19