如何为按钮（li元素）设置椭圆形背景？参考Stack Overflow产品按钮样式

你需要的是Stack Overflow产品按钮那种**胶囊形（大圆角）**样式，之前用border-radius: 40%没达到预期效果，是因为百分比值会根据元素的宽高比例生成椭圆圆角，而胶囊形按钮需要圆角半径至少等于元素高度的一半。

修正方案 #

把border-radius的百分比换成足够大的固定像素值（比如24px，或直接用9999px适配所有高度），同时给li元素添加合适的内边距，让按钮形态更贴合目标样式：

nav > ul > li {
  /* 给正常状态的li设置基础内边距，保证按钮的形态 */
  padding: 8px 16px;
  border-radius: 24px;
  transition: background-color 0.2s ease;
}

nav > ul > li:hover {
  background-color: #dfdfe2;
  color: #1b1b32;
  cursor: pointer;
}

li > a {
  color: inherit;
  text-decoration: none;
}

nav > ul {
  display: inline-block;
  vertical-align: middle;
  padding: 0.2%;
  margin: 0.7%;
}

关键说明 #

• border-radius: 24px：只要元素高度不超过48px（24px的两倍），就能呈现完美的胶囊圆角；如果不确定元素高度，用border-radius: 9999px可以适配任何高度的元素。
• 添加padding：让按钮有合适的留白，避免文字贴边，更接近Stack Overflow按钮的视觉尺寸。
• transition属性：让hover时的背景色变化更平滑，和Stack Overflow的交互效果一致。

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