Css 仅修改长方体阴影时的跳跃过渡，使用长方体阴影时效果良好+；边境
下面的代码片段显示了文本输入字段的两个示例。聚焦时，输入的底部厚度增加，颜色也会改变 第一个示例使用边框底部和框阴影的组合来实现效果。第二个示例仅使用框阴影。我认为效果应该是一样的。但是，长方体阴影仅在完成过渡时“跳跃”。为什么？有什么办法可以改进吗 该示例仅在Webkit的稳定版本上进行了测试Css 仅修改长方体阴影时的跳跃过渡，使用长方体阴影时效果良好+；边境,css,Css,下面的代码片段显示了文本输入字段的两个示例。聚焦时，输入的底部厚度增加，颜色也会改变 第一个示例使用边框底部和框阴影的组合来实现效果。第二个示例仅使用框阴影。我认为效果应该是一样的。但是，长方体阴影仅在完成过渡时“跳跃”。为什么？有什么办法可以改进吗 该示例仅在Webkit的稳定版本上进行了测试 input[type=“text”]{ 边界顶部：无； 左边界：无； 边界权：无； 填充：0 0 8px 0； 过渡：框阴影0.3s，边框0.3s； 将更改：框阴影、边框； 大纲：无； 框大小：边框框
input[type=“text”]{
边界顶部：无；
左边界：无；
边界权：无；
填充：0 0 8px 0；
过渡：框阴影0.3s，边框0.3s；
将更改：框阴影、边框；
大纲：无；
框大小：边框框；
}
#例1{
边框底宽：1px；
边框底色：rgba（0,0,0,0.26）；
}
#例1：焦点{
边框底色：#2196F3；
盒影：插图0-1px0#2196F3；
}
#例2{
边框底部：无；
填充底部：9px；
盒影：插入0-1px0RGBA（0,0,0,26）；
}
#例2：焦点{
盒影：插图0-2px0#2196F3；
}运行时看起来不错，而且我使用的是Chrome 您应该做的第一件事是确保您有一个最新的浏览器：transition在几个版本之前才被普遍采用 其次，转换并不是在每个元素上都能完美地工作，或者在某些元素上根本不能工作 使用此工具检查您尝试设置动画的元素的兼容性：
input[type=“text”]{
边界顶部：无；
左边界：无；
边界权：无；
填充：0 0 8px 0；
过渡：框阴影0.3s，边框0.3s；
将更改：框阴影、边框；
大纲：无；
框大小：边框框；
}
#例1{
边框底宽：1px；
边框底色：rgba（0,0,0,0.26）；
}
#例1：焦点{
边框底色：#2196F3；
盒影：插图0-1px0#2196F3；
}
#例2{
边框底部：无；
填充底部：9px；
盒影：插入0-1px0RGBA（0,0,0,26）；
过渡：长方体阴影。1s；
}
#例2：焦点{
盒影：插图0-2px0#2196F3；
过渡：盒影。4s；
}