作者kisha024 (4545454554)
看板Web_Design
標題[問題] CSS transition 問題
時間Wed Feb 7 13:41:13 2024
大家好
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卻不用呢？
謝謝
--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 223.139.4.47 (臺灣)
※ 文章網址: https://webptt.com/m.aspx?n=bbs/Web_Design/M.1707284475.A.C3E.html
1F：推 cknas: 先說以下說明可能有錯或不夠完整，還請各位高手強者不吝指 02/08 02:56
2F：→ cknas: 正。 02/08 02:56
3F：→ cknas: 原po的問題是因為你在設定border-image前沒有設定border， 02/08 02:56
4F：→ cknas: 所以對這個div來說border的設定不夠完整。 02/08 02:56
5F：→ cknas: 雖然border-image-outset的預設值是0，但你沒設定過border 02/08 02:56
6F：→ cknas: ，border-image-outset這個border關連的屬性自然也不會存在 02/08 02:56
7F：→ cknas: ，所以你的transition在hover前才會沒有對照值可以用。 02/08 02:56
8F：→ cknas: 你可以用開發者工具看，原本c1的div在非hover時，它是完全 02/08 02:56
9F：→ cknas: 沒有border-image-outset這個設定的。不過如果給c1一個 02/08 02:56
10F：→ cknas: border: none，就可以看到這個div有了border-image-outset: 02/08 02:56
11F：→ cknas: 0的設定。 02/08 02:56
12F：→ cknas: padding不用先設定是因為padding是一個每個div都必有的東西 02/08 02:56
13F：→ cknas: ，預設值為0，所以transition有前後值可以做變化。 02/08 02:56
14F：推 microloft: 我的理解跟樓上不太一樣，有興趣可參考後面回文。 02/08 15:51
謝謝兩位
※ 編輯: kisha024 (114.27.141.200 臺灣), 02/08/2024 22:43:48