作者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/cn.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