CSS中的笔荧光笔效果
Posted
技术标签:
【中文标题】CSS中的笔荧光笔效果【英文标题】：Pen highlighter effect in css 【发布时间】：2016-01-31 19:19:51 【问题描述】：我想创建一个类似于用钢笔制作的高光效果的高光效果。即它有波浪形的顶部和底部以及粗糙的起点和终点，就像这张图片一样。
在 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>
【问题讨论】：
【参考方案1】：我一直在寻找使用纯 CSS 的最佳效果，发现 Basecamp 使用的效果非常引人注目。不过仍有改进的余地。
这是我的改进版：
这里是代码：
mark
margin: 0 -0.4em;
padding: 0.1em 0.4em;
border-radius: 0.8em 0.3em;
background: transparent;
background-image: linear-gradient(
to right,
rgba(255, 225, 0, 0.1),
rgba(255, 225, 0, 0.7) 4%,
rgba(255, 225, 0, 0.3)
);
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
Inside this text some words <mark>are highlighted</mark> and some aren’t.如果您对它的工作原理感兴趣：
我写了一个tutorial about how the marker pen highlighter effect is achieved。
【讨论】：
太棒了！干得好！【参考方案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>【讨论】：
嘿，对不起；您对如何在深色背景上实现此效果有任何想法吗？我已尝试更改值，但似乎没有任何效果。 嗯，我并不惊讶为深色背景找到正确的设置更难。笔荧光笔在现实生活中也会遇到困难；） 这是我什至不知道自己需要的 CSS 样式！ @MattPi 我觉得问你这个问题很愚蠢；我不知道当时我是怎么了。 不要以为我以前在 CSS 中见过这样的现实主义。哇！【参考方案3】：这个答案更接近原来的问题：
.book-in-quest
font-size: 34px;
letter-spacing: -2.5px;
font-family: arial;
line-height: 1.05;
display: flex;
flex-wrap: wrap;
color: #523D13;
.page
width:428px;
height: 453px;
margin: 20px;
overflow: hidden;
// margin-bottom: 50px;
border-bottom: #846C3C dotted 1px;
blockquote, p
padding-bottom: 10px;
blockquote
font-size: 28px;
margin-top:0;
margin-bottom:0;
margin-inline-start: 30px;
p
margin: 0;
.highlight
font-size: 23px;
background-color:#FFFF66;
line-height: 23px;
border-radius: 100px;
.text
font-size: 34px;
font-weight: 700;
<div class="book-in-quest">
<div class="page">
<p>
Roberta is <span class="highlight"><span class="text">creating</span></span> a statue in honor of <span class="highlight"><span class="text">T. Schmidt O. Ren and E. Dash</span></span>, but the photo is <span class="highlight"><span class="text">too old</span></span>. She'll need a better picture from Gary to finish the job! an unusual</span></span>
</div>
</div>归功于：https://codepen.io/laurenvast/pen/JmOaNd
【讨论】：
【参考方案4】：如果您不限于子 HTML5 可用标签，您还可以使用 HTML5 中引入的<mark>...</mark> 标签：
<!DOCTYPE HTML>
<html>
<head>
<style>
mark
background-color: #069aaa;
color: #fff;
padding: 5px; /* optional... */
</style>
</head>
<body>
<p>
This is some <mark>text that's been</mark> highlighted.
</p>
</body>
</html>【讨论】：
【参考方案5】：仅使用 CSS，您可以获得的最接近屏幕截图的内容如下所示：
.green-highlight, .pink-highlight, .yellow-highlight
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
padding-left: 3px;
.green-highlight
background: #99FFCC; /* Default color, all browsers */
.green-highlight::selection
background: #99CCCC; /* Selection color, WebKit/Blink Browsers */
.green-highlight::-moz-selection
background: #99CCCC; /* Selection color, Gecko Browsers */
.pink-highlight
background: #FFCCFF; /* Default color, all browsers */
.pink-highlight::selection
background: #FF99FF; /* Selection color, WebKit/Blink Browsers */
.pink-highlight::-moz-selection
background: #FF99FF; /* Selection color, Gecko Browsers */
.yellow-highlight
background: #FFFFCC; /* Default color, all browsers */
.yellow-highlight::selection
background: #FFFF66; /* Selection color, WebKit/Blink Browsers */
.yellow-highlight::-moz-selection
background: #FFFF66; /* Selection color, Gecko Browsers */
<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>如果这还不够近，恐怕你必须使用图像。
【讨论】：
老实说，使用如此简单的 css，您的结果非常出色！【参考方案6】：不使用背景颜色..no.
背景延伸到元素的边缘，总是矩形的（除了border-radius）
在这种情况下，背景图片可能是最佳选择...但是：
您可以使用多个text-shadows 来实现类似的效果。
一个简单的例子。
.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>只需使用尽可能多的阴影即可获得所需的完整效果，
【讨论】：
以上是关于CSS中的笔荧光笔效果的主要内容，如果未能解决你的问题，请参考以下文章
如何永久更改 Adobe Acrobat Reader DC 中的荧光笔颜色？