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>

Answer 1

获得超逼真的笔式荧光笔！使用背景渐变来增强强度，并使用文本阴影来发挥效果。

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>

Answer 2

仅使用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>

如果距离不够近，我恐怕你必须使用图像。

Answer 3

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

背景延伸到元素的边缘，这些边缘总是矩形的（限制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>

只需使用尽可能多的阴影即可获得所需的全部效果，

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

Answer 5

这个答案更接近原始问题：

 
.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

Answer 6

我一直在寻找使用纯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。

Answer 7

只需使用填充设置背景，请参阅此处的演示http://www.tutorialspark.com/css3/CSS_text_Shadow.php

＆＃13;

 <!DOCTYPE HTML>
<html>
<head>
   <style>
     body{font-family:Arial;
      
       color:#666666;
       font-size:2em;}
       
       /* text-shadow:( x-offset, y-offset, blur-radius, color); */
     
       h1{text-shadow:
          0px 0px 20px #fa4b2a,
         0px 0px 20px #fa4b2a;
	     }
     
     
   </style>
</head>
 <body>
   <h1>Glowing  Text</h1>

</body>
</html>

＆＃13;

笔在CSS中的荧光笔效果

7 个答案: