设置不同border-radius的标签元素左侧圆角不显示问题求助

嘿，我来帮你搞定这个问题！你遇到的情况其实是浏览器处理border-radius的规则在搞鬼，咱们一步步说清楚：

问题根源 #

你先写了border-radius: 50px，这相当于给标签的四个角都设了50px的圆角，之后再单独把左上、左下改成3px。但这里有个浏览器的核心渲染规则：当相邻两个圆角的半径之和超过元素对应边的长度时，浏览器会按比例缩放这两个圆角的半径，让它们的总和刚好等于边的长度。

比如你的标签高度如果是20px，右侧两个圆角（右上、右下）的半径都是50px，加起来100px远大于20px，浏览器就会自动把这两个圆角的半径缩成10px（也就是高度的一半）。这时候如果你的左侧圆角设的是3px，虽然它确实生效了，但如果标签高度很小，缩后的右侧圆角（10px）和左侧圆角（3px）的差距可能不明显；要是标签高度刚好是6px，缩后的右侧圆角会变成3px，左右圆角就完全一样了，你自然觉得左侧没效果。而当你把大半径改成10-12px时，刚好等于或接近标签高度的一半，浏览器不需要缩放，左侧的小圆角就清晰可见了。

解决方案 #

要保留大半径同时让左侧圆角生效，你需要直接明确四个角的圆角值，用border-radius的完整顺序写法（左上、右上、右下、左下），而不是先写简写再覆盖。这样浏览器会优先尊重你每个角的设置，不会因为整体缩放影响左侧的小圆角：

.tag {
  /* 左上3px，右上/右下50px，左下3px */
  border-radius: 3px 50px 50px 3px;
  background-color: red;
  color: white;
  font-family: Helvetica, sans-serif;
  padding: 4px 12px; /* 加个内边距，让标签更美观，也能让圆角效果更明显 */
}

这样不管标签的高度是多少，只要左侧的3px圆角小于标签高度的一半，就会正常显示；而右侧的50px圆角如果超过标签高度的一半，浏览器只会把右侧的圆角缩成高度的一半，但不会影响左侧的设置，完美解决你的问题！

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