如何实现图片hover时蓝色边框从边缘向内收缩的过渡动画效果

该需求可以直接通过调整现有CSS规则实现，核心是给outline-offset属性增加过渡逻辑，改动点如下：

1. 把span::before默认状态的outline-offset值从-10px改为0，让边框初始位置贴合图片外边缘
2. 在hover的规则中补充outline-offset: -10px配置，触发偏移量的过渡动画

修改后的完整CSS代码如下：

.article-block__img-wrapper {
     position: relative;
}
.article-block__img-wrapper span {
     position: relative;
     display: inline-block;
}
.article-block__img-wrapper span::before {
     display: block;
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: 1;
     transition: 0.2s ease-in-out;
     outline: 1px solid #4F8EFF;
     /* 默认边框贴合边缘 */
     outline-offset: 0;
     opacity: 0;
}
.article-block__img-wrapper:hover span::before {
     opacity: 1;
     /* hover时边框向内收缩到10px位置 */
     outline-offset: -10px;
}

修改后会同时触发透明度和边框偏移量的过渡，最终效果就是蓝色边框一边淡入，一边从图片外边缘逐渐向内收缩到距离边缘10px的固定位置，完全符合需求。

内容的提问来源于stack exchange，提问作者user17541419