html – 在CSS中的笔荧光笔效果

我想创建一个高亮效果,类似于用笔制作的高光.即它有波浪形的顶部和底部以及粗略的开始和结束,如图所示.

在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>

解决方法

不使用背景颜色..没有.

背景延伸到元素的边缘,这些边缘总是矩形的(限制边界半径)

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

您可以使用多个文本阴影来实现类似的效果.

一个简短的例子.

.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,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>

这只需要使用尽可能多的阴影来获得所需的全部效果,