如何为Bootstrap链接实现圆角效果 自定义CSS不生效问题排查

问题原因 #

• 优先级冲突：Bootstrap 3 自带的.btn类默认设置了border-radius: 4px，如果你的自定义样式优先级低于Bootstrap默认样式，圆角设置就会被覆盖。
• 类名拼写错误：CSS类名区分大小写，你定义的类是.RoundIT，但最后一个测试链接的类写为RoundIt（末尾t小写），导致样式完全不生效。
• 额外兼容问题：.btn类默认自带内边距，和你设置的固定height配合可能出现内容偏移，建议统一盒模型规则。

修正方案 #

调整自定义CSS的优先级、修正类名拼写即可：

修正后的CSS

/* 选择器写成 .btn.RoundIT 优先级高于默认的.btn类，不会被覆盖，比加!important更规范 */
.btn.RoundIT {
    text-align:center;
    width:100%;
    height:40px;
    font-size: 13px;
    letter-spacing: 1px;
    line-height: 28px; /* 调整为高度减去btn默认上下内边距，避免文字偏移 */
    border-radius: 40px;
    transition: all 0.3s ease 0s;
    box-sizing: border-box;
}

修正后的HTML对应部分

<!-- 修正类名拼写为RoundIT，保留btn类保证按钮基础样式正常 -->
<a id="ctl00_ContentPlaceHolder1_hypProsegui" class="btn btn-success RoundIT" href="Index.aspx" style="width:30%;min-width:130px">link without css btn and RoundIT</a>

如果不需要保留.btn的默认样式，直接去掉btn类后.RoundIT的样式也会正常生效，不需要额外调整优先级。

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