如何使用HTML/CSS实现带圆角的多行文本选中高亮效果

架构老林

2026-9-30

纯CSS优化方案（优先推荐）

不需要借助JavaScript，仅通过补充CSS属性即可解决全部三个问题，优化后的代码如下：

.textblock {
  width: 200px;
  /* 直接去掉不需要的两端对齐，使用默认左对齐即可 */
  text-align: left;
  /* 调整行高为圆角留出足够空间，避免圆角被上下行裁切 */
  line-height: 1.8;
}
.highlighted {
  --highlight-radius: 10px;
  border-radius: var(--highlight-radius);
  background-color: rgb(61, 107, 39);
  /* 增加内边距避免文字紧贴高亮边缘 */
  padding: 2px 8px;
  /* 核心属性：让行内元素换行时每一行独立渲染盒样式 */
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  /* 阴影可以正常生效 */
  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3);
  color: #fff;
}

对应问题解决逻辑

高亮边角圆角异常：默认box-decoration-break属性值为split，会把换行的行内元素识别为一个被切割的整体，圆角仅出现在整个元素的首尾，改为clone后每一行都会独立渲染完整的盒样式，圆角会正常作用在每一行的边角，也可根据需求自定义每一角的圆角数值实现你要的斜切风格。
无需两端对齐：该方案不依赖文本对齐规则实现边缘对齐，直接删掉text-align: justify即可保留默认左对齐效果。
box-shadow效果异常：同样是box-decoration-break: clone的作用，开启后阴影会跟随每一行的高亮盒子独立渲染，不会出现错乱。