如何修改标签形状？实现提示框圆角与标签无尖点效果

要实现圆角、无尖点的提示框/标签，不需要特殊函数，通过CSS即可直接完成，核心思路是设置圆角属性+移除尖点相关样式，具体实现如下：

基础自定义实现（纯HTML+CSS） #

HTML结构 #

<div class="rounded-tooltip">这是圆角无尖点的提示框</div>

CSS样式 #

.rounded-tooltip {
  /* 基础样式：背景、文字颜色、内边距 */
  background-color: #2c3e50;
  color: #ffffff;
  padding: 6px 12px;
  /* 关键：设置圆角，数值可根据需求调整（比如4px/8px/12px） */
  border-radius: 8px;
  /* 移除可能生成尖点的伪元素（如果之前有相关样式，直接删除或设置display:none） */
  position: relative;
}

/* 若之前有尖点的伪元素代码，直接删除或禁用 */
/* .rounded-tooltip::before {
  display: none;
} */

框架组件适配（如Element UI、Bootstrap等） #

如果是使用UI框架的标签/提示组件，只需覆盖框架的默认CSS类即可：

示例：Element UI 标签修改 #

.el-tag {
  border-radius: 8px;
  /* 移除框架自带的边框或尖角相关样式 */
  border: none;
}

示例：Bootstrap Tooltip 修改 #

.tooltip-inner {
  border-radius: 8px;
}
/* 移除Tooltip的箭头尖点 */
.bs-tooltip-auto[data-popper-placement^=top] > .tooltip-arrow::before,
.bs-tooltip-top > .tooltip-arrow::before {
  display: none;
}

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