CSS中的圆形荧光笔标记效果答案

【问题标题】：Rounded highlighter marker effect in CSSCSS中的圆形荧光笔标记效果
【发布时间】：2022-01-07 23:39:34
【问题描述】：

我想实现以下效果，背景中的绿色标记也应该尊重换行。这意味着与this one之类的问题相比，标记效果不应该跨越文本的整个高度，而应该只是底部：

目前，我已经设法这样做了，但是下划线的上边缘在这里没有圆角，因为border-radius 显然不会影响这些。我该如何解决这个问题？

.highlighted {
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0) 60%,
    rgba(154, 216, 215, 1) 60%,
    rgba(154, 216, 215, 1) 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;
}

<div class="highlighted">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
  ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis
  dis parturient
</div>

【问题讨论】：

使用:before或:after等伪元素

标签： html css

【解决方案1】：

使用多个背景：

.highlighted {
  --c:rgb(154, 216, 215); /* the color */
  --r:12px; /* the size/radius */
  background: 
    radial-gradient(farthest-side,var(--c) 98%,#0000) bottom left,
    linear-gradient(var(--c) 0 0) bottom,
    radial-gradient(farthest-side,var(--c) 98%,#0000) bottom right;
  background-size:var(--r) var(--r),calc(100% - var(--r)) var(--r);
  background-repeat:no-repeat;
  padding: 0 0.5rem;
  line-height: 2;
  font-size: 2rem;
  display: inline;
  font-weight: bold;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

<div class="highlighted">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
  ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis
  dis parturient
</div>

<div class="highlighted" style="--c:red;--r:16px">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
  ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis
  dis parturient
</div>

另一种渐变较少的语法：

.highlighted {
  --c:rgb(154, 216, 215); /* the color */
  --r:12px; /* the size/radius */
  background: 
    radial-gradient(farthest-side,var(--c) 98%,#0000) 
     0 100%/var(--r) var(--r) round no-repeat,
    linear-gradient(var(--c) 0 0) 
     bottom/calc(100% - var(--r)) var(--r) no-repeat;
  padding: 0 0.5rem;
  line-height: 2;
  font-size: 2rem;
  display: inline;
  font-weight: bold;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

<div class="highlighted">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
  ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis
  dis parturient
</div>

<div class="highlighted" style="--c:red;--r:16px">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
  ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis
  dis parturient
</div>

【讨论】：