如何实现适配圆角的三边outline效果？box-shadow问题修复求助

我有如下HTML结构：

<div class="input-container" data-language="fr-CA">
     <input class="input-arrows" data-min="0" data-max="100">
     <span class="input-symbol">%</span>
     <div>
        <button data-add="10">+</button>
        <button data-add="-10">-</button>
    </div>
</div>

我希望在元素聚焦时，为输入框和按钮所在区域添加类似原生outline的聚焦效果，目前用了如下CSS（应用于输入框和按钮的父div）：

.with_arrows.input-focus {
    outline: none;
    box-shadow: 0 3px 0 rgba(133, 209, 220, 0.7), -3px 0 0 rgba(133, 209, 220, 0.7), 0 -3px 0 rgba(133, 209, 220, 0.7);
    border-right: none;
}
.buttons-focus {
    box-shadow: 0 3px 0 rgba(133, 209, 220, 0.7), 3px 0 0 rgba(133, 209, 220, 0.7), 0 -3px 0 rgba(133, 209, 220, 0.7);
    border: 1px solid $primary-700 !important;
}

当前实现的圆角处效果不符合预期，尝试添加4px模糊半径后仍无法达到原生outline的效果，请问该如何修复？

解决方案 #

你当前用多段box-shadow拼接的方式，无法自然处理圆角的衔接问题——因为每个阴影都是独立的直线段，没法像原生outline那样贴合圆角。这里给你两种可行方案：

方案1：用原生outline实现（推荐，无障碍友好） #

原生outline本身就支持跟随元素的border-radius，只要给父元素设置对应圆角，outline会自动贴合。你可以通过调整outline-offset控制轮廓和元素的间距，配合outline-width和outline-color实现需求：

/* 统一处理两个聚焦类 */
.with_arrows.input-focus,
.buttons-focus {
    outline: 3px solid rgba(133, 209, 220, 0.7);
    outline-offset: 0; /* 可根据需要调整轮廓与元素的距离 */
    border-radius: 4px; /* 与元素自身的圆角值保持一致 */
    /* 移除之前的box-shadow和不必要的样式 */
    box-shadow: none;
    border-right: none;
}

/* 单独保留buttons-focus的border样式 */
.buttons-focus {
    border: 1px solid $primary-700;
}

方案2：用单个box-shadow模拟 #

如果必须用box-shadow，别拆分多个方向的阴影，改用带扩散半径（spread radius）的单个box-shadow，同时确保元素设置了border-radius，这样阴影会自动贴合圆角：

.with_arrows.input-focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(133, 209, 220, 0.7);
    border-radius: 4px; /* 匹配元素的圆角 */
    border-right: none;
}

.buttons-focus {
    box-shadow: 0 0 0 3px rgba(133, 209, 220, 0.7);
    border: 1px solid $primary-700;
    border-radius: 4px;
}

关键注意点 #

• 一定要给应用样式的父div设置border-radius，否则outline或box-shadow没有圆角可以贴合；
• 原生outline是浏览器默认的聚焦指示器，对无障碍更友好，优先推荐使用。

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