我想创建一个高亮效果,类似于用笔制作的高光.即它有波浪形的顶部和底部以及粗略的开始和结束,如图所示.
在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>
这只需要使用尽可能多的阴影来获得所需的全部效果,
