圆角按钮边框动画优化：解决Hover时初始圆角为0的问题

问题根源在于：你的伪元素边框是在hover触发时才新增的，初始状态下伪元素没有边框——哪怕设置了border-radius，0尺寸的无边框元素也无法渲染出圆角效果。只有当hover触发后边框被添加、元素尺寸开始增长时，圆角才会随着尺寸变大逐渐显现，这就导致了视觉上的延迟。

修复方案 #

提前给伪元素设置对应边框（初始设为透明），hover时仅修改边框颜色，让border-radius从一开始就作用在边框上：

.container {
  width: 100%;
  height: 200px;
  background: wheat;
  display: flex;
  justify-content: center;
  align-items: center;
}

.btn {
    position: relative;
    display: block;
    width: 180px;
    z-index: 3;
    cursor: pointer;
    border-radius: 4px;
    text-decoration: none;
    border: 1px solid black;
    text-align: center;
    padding: 8px 0;
    color: black;
}

.btn:before, .btn:after {
    display: block;
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    border-radius: 4px;
    /* 提前设置边框，初始透明 */
    border-top: 2px solid transparent;
    border-right: 2px solid transparent;
    border-bottom: 2px solid transparent;
    border-left: 2px solid transparent;
    transition: opacity 200ms ease-in-out;
}

.btn:before {
    top: -1px;
    left: -1px;
    /* 只保留需要的两条边框 */
    border-bottom: none;
    border-left: none;
}

.btn:after {
    bottom: -1px;
    right: -1px;
    /* 只保留需要的两条边框 */
    border-top: none;
    border-right: none;
}

.btn:hover:before {
    width: 180px;
    height: calc(100%);
    opacity: 1;
    /* 修改边框颜色而非新增边框 */
    border-top-color: white;
    border-right-color: white;
    transition: width 300ms cubic-bezier(.07, .62, .61, 1), height 150ms 300ms cubic-bezier(.07, .62, .61, 1);
}

.btn:hover:after {
    width: 180px;
    height: calc(100%);
    opacity: 1;
    /* 修改边框颜色而非新增边框 */
    border-bottom-color: white;
    border-left-color: white;
    transition: width 300ms cubic-bezier(.07, .62, .61, 1), height 150ms 300ms cubic-bezier(.07, .62, .61, 1);
}

<div class="container"><a href="" class='btn'>Hover me</a></div>

关键修改点 #

1. 初始状态给伪元素添加对应边框，颜色设为transparent，确保border-radius从一开始就对边框生效；
2. hover时仅修改边框颜色，而非动态添加边框，避免圆角渲染延迟；
3. 保留原有的动画时序和曲线，保证hover交互效果和之前一致。

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