如何用CSS为文本添加带圆角的填充式边框？

你可以用CSS的几个核心属性快速实现截图里的效果，具体代码和说明如下：

核心CSS代码 #

/* 替换成你标题对应的选择器，比如h1、.page-title等 */
.your-title-selector {
  /* 设置填充背景色，根据需求调整 */
  background-color: #2c3e50;
  /* 控制文本与边框的间距，上下8px、左右16px可按需修改 */
  padding: 8px 16px;
  /* 圆角半径，数值越大圆角越圆润 */
  border-radius: 20px;
  /* 可选：设置文字颜色，让文本更突出 */
  color: #ffffff;
  /* 可选：添加轻微阴影增强层次感 */
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
}

调整说明 #

• 把.your-title-selector换成你页面中标题对应的类名或标签选择器（比如h2）
• 修改background-color的色值，匹配你需要的填充底色
• 调整padding的数值可以改变填充区域的大小，比如增大数值会让边框更宽
• border-radius可以根据截图效果调整，比如改成15px或25px

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