CSS实现支持自动换行的底部局部圆角荧光笔高亮效果问题

你可以通过叠加径向渐变的方式填补顶部的直角，实现全圆角的半高高亮效果，修改后的CSS代码如下：

.highlighted {
  background: 
    /* 左上角圆角 */
    radial-gradient(circle at 0 60%, #9ad8d7 8px, transparent 8px) left top,
    /* 右上角圆角 */
    radial-gradient(circle at 100% 60%, #9ad8d7 8px, transparent 8px) right top,
    /* 原有底部高亮渐变 */
    linear-gradient(180deg, transparent 60%, #9ad8d7 60%) center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding: 0 0.5rem;
  line-height: 2;
  font-size: 2rem;
  display: inline;
  font-weight: bold;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  max-width: 100vw;
  border-radius: 8px;
}

实现说明 #

• 新增的两个径向渐变分别定位在元素顶部的左右拐角，圆心和原有线性渐变的上边界（60%高度处）对齐，半径和border-radius取值一致，刚好把原本的直角填充为圆角
• 所有背景共用100% 100%的尺寸，配合box-decoration-break: clone属性，换行后的每一行文本都会独立生成完整的高亮效果，完全适配自动换行场景
• 简化了原有渐变的写法，省略了透明色的重复起止定义，代码更简洁易维护

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