css中的笔荧光笔效果

Question

我想创建一个高光效果，类似于用钢笔制作的高光。即它有波浪形的顶部和底部以及粗糙的开始和结束，就像这张照片中一样。

在 CSS 中执行此操作的最佳方法是什么？有没有不使用背景图片的方法？也因此它适用于换行。

理想情况下，该解决方案将采用如下所示的 HTML 并使其看起来像图像。

 <p>
  <span class='green-highlight'>So write with a combination of short, medium, and long sentences. Create a sound that pleases the reader's ear. </span>
  <span class='pink-highlight'>Don't just write words. </span>
  <span class='yellow-highlight'>Write music. </span
</p>

原文由 chrisb 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

不使用背景颜色..不。

背景延伸到始终为矩形的元素的边缘（除非 border-radius ）

在这种情况下，背景图片可能是最佳选择…… 但是：

您可以使用多个 text-shadow 实现类似的效果。

一个简短的例子。

 .green-highlight {
  text-shadow:
     3px 0px 3px green,
    -3px 0px 3px green,
     6px 0px 6px green,
    -6px 0px 6px green;

}

.red-highlight {
  text-shadow:
     3px 0px 3px red,
    -3px 0px 3px red,
     6px 0px 6px red,
    -6px 0px 6px red;
}

.yellow-highlight {
  text-shadow:
    -3px 0px 3px yellow,
     3px 0px 3px yellow,
     6px 0px 6px yellow,
    -6px 0px 6px yellow;
}

 <p>
  <span class="green-highlight">So write with a combination of short, medium, and long sentences. Create a sound that pleases the reader's ear. </span>
  <span class="red-highlight">Don't just write words. </span>
  <span class="yellow-highlight">Write music. </span
</p>

这只是使用尽可能多的阴影来获得所需的完整效果的问题，

原文由 Paulie_D 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

超逼真的笔荧光笔！使用背景渐变的强度和文本阴影来赋予它水洗效果。

 span {
    padding: 0.6em 13.7px;
    line-height: 1.8em;
    font-size: 23px;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial;
}
span.highlight {
font-weight: bolder;
background: linear-gradient(104deg, rgba(130, 255, 173,0) 0.9%, rgba(130, 255, 173,1.25) 2.4%, rgba(130, 255, 173,0.5) 5.8%, rgba(130, 255, 173,0.1) 93%, rgba(130, 255, 173,0.7) 96%, rgba(130, 255, 1732,0) 98%), linear-gradient(183deg, rgba(130, 255, 173,0) 0%, rgba(130, 255, 173,0.3) 7.9%, rgba(130, 255, 173,0) 15%);
padding: 0.6em 13.7px;
-webkit-box-decoration-break: clone;
margin: 0;
border-radius: 7.5px;
text-shadow: -12px 12px 9.8px rgba(130, 255, 173,0.7), 21px -18.1px 7.3px rgba(255, 255, 255,1), -18.1px -27.3px 30px rgba(255, 255, 255,1);
}

 <span class="highlight">Lorem Ipsum is simply dummy text of the printing and</span> <span>typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled <span class="highlight">it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was<span>

原文由 Matt Pi 发布，翻译遵循 CC BY-SA 4.0 许可协议