看板 Web_Design 關於我們 聯絡資訊
大家好 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://www.ptt.cc/bbs/Web_Design/M.1707284475.A.C3E.html
cknas: 先說以下說明可能有錯或不夠完整,還請各位高手強者不吝指 02/08 02:56
cknas: 正。 02/08 02:56
cknas: 原po的問題是因為你在設定border-image前沒有設定border, 02/08 02:56
cknas: 所以對這個div來說border的設定不夠完整。 02/08 02:56
cknas: 雖然border-image-outset的預設值是0,但你沒設定過border 02/08 02:56
cknas: ,border-image-outset這個border關連的屬性自然也不會存在 02/08 02:56
cknas: ,所以你的transition在hover前才會沒有對照值可以用。 02/08 02:56
cknas: 你可以用開發者工具看,原本c1的div在非hover時,它是完全 02/08 02:56
cknas: 沒有border-image-outset這個設定的。不過如果給c1一個 02/08 02:56
cknas: border: none,就可以看到這個div有了border-image-outset: 02/08 02:56
cknas: 0的設定。 02/08 02:56
cknas: padding不用先設定是因為padding是一個每個div都必有的東西 02/08 02:56
cknas: ,預設值為0,所以transition有前後值可以做變化。 02/08 02:56
microloft: 我的理解跟樓上不太一樣,有興趣可參考後面回文。 02/08 15:51
謝謝兩位 ※ 編輯: kisha024 (114.27.141.200 臺灣), 02/08/2024 22:43:48