Html 过渡瞬间设置边框，慢慢显示

目前我有图像作为复选框，我可以点击，然后一个黄色的边框出现了过渡

很明显，当边界出现时，它会更改边距内容和所有内容，因此我将默认边距设置为

3px

，当边界出现时，它会消失（边界也是3px） 但是，因为我使用了到边界的过渡，它变大了，当边界变大时，所有的图像都在关闭和抖动：D

所以现在我必须让边界在我一点击它就立即出现在3px上，但它不应该立即显示为3px。。。 我不知道怎么做这是我目前的css

有一小部分css丢失了，但是堆栈溢出不允许我上传它，因为它不接受它作为代码

img{
宽度：100%；
最大宽度：380px；
边框：3倍实心rgba（255.0.0.0）；
背景色：黑色；
身高：100%；
最大高度：250px；
保证金：3倍；
边界半径：15px；
过渡：不透明度2缓，边框1缓；
不透明度：0.5；
}

---

<代码>

如果不想在添加边框时中断布局，可以考虑使用

盒影

而不是边界属性，并转换此属性

$（'.box'）。在（'click'，function（）上{
$（this.addClass（'box--checked'）；
});
.box{
宽度：120px；
高度：120px；
过渡：长方体阴影。3s线性；
边缘底部：12px；
背景色：#DDD；
盒影：0px 0px 0px 0px达克朗格；
}
.框--选中{
盒影：0px 0px 0px 6px暗光；
}

A.
B
C
为什么不将边框设置为透明的，并且只转换“边框颜色”


img{
宽度：100%；
最大宽度：380px；
边框：3倍纯色透明；
身高：100%；
最大高度：250px；
保证金：3倍；
边界半径：15px；
过渡：不透明度2缓，边框颜色1缓；
不透明度：0.5；
}
img：悬停{
边框颜色：红色；
}
很难真正理解你想要什么。但您始终可以尝试在transition属性中添加
margin 1s ease
。您还应该显示
img:hover
的css或用于触发更改的内容。您应该在此处阅读如何输入代码-我可以看到您缺少缩进。任何代码都应该以4个空格开始，以解释为代码。添加代码以说明和澄清您的问题。