如何为设置了border-radius的input元素聚焦时添加outline效果？

默认CSS的outline属性本身不遵循元素的border-radius设置，是规范定义的默认行为，因此直接设置outline只能得到直角描边效果，你可以根据兼容性需求选择以下任意方案实现：

方案1：使用box-shadow替代outline（最常用，兼容性好） #

box-shadow会自动贴合元素的圆角，是目前适用场景最广的实现方式，示例代码如下：

/* 提前给input设置基础圆角 */
.code-inputs input {
  border-radius: 10px;
  border: 1px solid #d1d5db;
  padding: 6px 10px;
}

.code-inputs input:focus {
  /* 关闭默认outline */
  outline: none;
  /* 四个参数分别为：水平偏移、垂直偏移、模糊半径、扩展半径 + 描边颜色 */
  box-shadow: 0 0 0 2px #2563eb;
}

方案2：使用新特性outline-follow-radius（适合只兼容现代浏览器的场景） #

Chrome 113+、Edge 113+、Safari 17+版本已经支持outline-follow-radius属性，可以直接让outline跟随元素圆角：

.code-inputs input:focus {
  outline: 2px solid #2563eb;
  outline-follow-radius: auto;
}

方案3：使用伪元素实现（兼容性最强，支持所有主流浏览器） #

如果需要兼容非常老的浏览器，可以用伪元素自定义描边层：

.code-inputs input {
  position: relative;
  border-radius: 10px;
  border: 1px solid #d1d5db;
  padding: 6px 10px;
  outline: none;
}

.code-inputs input:focus::after {
  content: "";
  position: absolute;
  /* 描边比input本体大2px，对应描边宽度 */
  inset: -2px;
  /* 圆角比input本体大2px，保证贴合效果 */
  border-radius: 12px;
  border: 2px solid #2563eb;
  /* 避免描层层挡住输入操作 */
  pointer-events: none;
}

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