PTT數位生活區 / Web_Design

[問題] CSS transition 問題

看板Web_Design作者 (4545454554)時間2月前 (2024/02/07 13:41), 2月前編輯推噓2(2推 0噓 12→)
留言14則, 2人參與, 2月前最新討論串1/2 (看更多)
大家好 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
推
02/08 02:56, 2月前 , 1F
先說以下說明可能有錯或不夠完整，還請各位高手強者不吝指
02/08 02:56, 1F
→
02/08 02:56, 2月前 , 2F
正。
02/08 02:56, 2F
→
02/08 02:56, 2月前 , 3F
原po的問題是因為你在設定border-image前沒有設定border，
02/08 02:56, 3F
→
02/08 02:56, 2月前 , 4F
所以對這個div來說border的設定不夠完整。
02/08 02:56, 4F
→
02/08 02:56, 2月前 , 5F
雖然border-image-outset的預設值是0，但你沒設定過border
02/08 02:56, 5F
→
02/08 02:56, 2月前 , 6F
，border-image-outset這個border關連的屬性自然也不會存在
02/08 02:56, 6F
→
02/08 02:56, 2月前 , 7F
，所以你的transition在hover前才會沒有對照值可以用。
02/08 02:56, 7F
→
02/08 02:56, 2月前 , 8F
你可以用開發者工具看，原本c1的div在非hover時，它是完全
02/08 02:56, 8F
→
02/08 02:56, 2月前 , 9F
沒有border-image-outset這個設定的。不過如果給c1一個
02/08 02:56, 9F
→
02/08 02:56, 2月前 , 10F
border: none，就可以看到這個div有了border-image-outset:
02/08 02:56, 10F
→
02/08 02:56, 2月前 , 11F
0的設定。
02/08 02:56, 11F
→
02/08 02:56, 2月前 , 12F
padding不用先設定是因為padding是一個每個div都必有的東西
02/08 02:56, 12F
→
02/08 02:56, 2月前 , 13F
，預設值為0，所以transition有前後值可以做變化。
02/08 02:56, 13F
推
02/08 15:51, 2月前 , 14F
我的理解跟樓上不太一樣，有興趣可參考後面回文。
02/08 15:51, 14F
謝謝兩位 ※ 編輯: kisha024 (114.27.141.200 臺灣), 02/08/2024 22:43:48
‣ 更多 kisha024 的文章
文章代碼(AID): #1bmnVxm- (Web_Design)
討論串 (同標題文章)
以下文章回應了本文：
完整討論串 (本文為第 1 之 2 篇)：
排序： 最舊先 | 最新先 | 留言數
在新視窗開啟完整討論串 (共2篇)
Web_Design 近期熱門文章
更多 近期熱門文章 >>
PTT數位生活區 即時熱門文章
更多 即時熱門文章 >>
‣ 更多 kisha024 的文章
文章代碼(AID): #1bmnVxm- (Web_Design)