如何实现Pomofocus按钮点击切换类？border-width设置无效排查

为什么border-width设置不生效？ #

单独设置border-width不会触发边框渲染，浏览器需要同时知道边框样式和颜色才能显示边框，得先给基础按钮样式补上必要的边框属性。

实现步骤（无需新增div） #

1. 给.timerButton添加基础样式与过渡动画

.timerButton {
  /* 重置浏览器默认按钮样式 */
  border: none;
  /* 初始化底部边框：样式+颜色+默认宽度0 */
  border-bottom: 0 solid #你的目标边框颜色;
  /* 添加过渡动画，实现平滑切换 */
  transition: border-bottom-width 0.3s ease;
  /* 其他按钮样式： padding、字体、背景色等按需添加 */
  padding: 8px 16px;
  cursor: pointer;
}

2. 修改active类的样式

.active {
  border-bottom-width: 10px;
}

3. 简化Vue模板的类绑定（非必需，但更简洁）

<button role="link" @click="handleClick" class="timerButton" :class="{ active: active }">START</button>

说明 #

点击按钮切换active状态时，底部边框宽度会通过transition属性平滑过渡，完全不需要额外新增div元素。如果按钮有浏览器自带的默认边框，记得用border: none;重置，避免样式冲突。

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