CSS 文本高亮

在编写代码时，我们经常需要将代码中的某些部分进行高亮显示，以便更好地阅读和理解代码。在 CSS 中，我们可以使用伪元素 ::before 和 ::after 来创建一些文本效果，从而实现文本高亮的效果。

CSS3 linear-gradient() 方法

CSS3 提供了一个 linear-gradient() 方法，它可以让我们创建一个线性渐变的背景。通过使用 linear-gradient() 方法，我们可以在文本上创建出渐变的效果，从而实现文本的高亮显示。

.highlight {
  background: linear-gradient(#fff, #ff0);
}

这个例子中，我们将背景从白色渐变到黄色，使文本看起来像是被标记出来的。

box-shadow 属性

CSS3 还提供了一个 box-shadow 属性，它可以给元素添加一个立体的阴影效果。我们可以使用 box-shadow 属性来给文本添加高亮的效果。

.highlight {
  box-shadow: 0 0 10px #ff0;
}

这个例子中，我们给文本添加了一个黄色的阴影效果，让它看起来像是被高亮标记出来的。

text-shadow 属性

与 box-shadow 类似，CSS3 还提供了一个 text-shadow 属性，它可以给文本添加一个立体的阴影效果。通过调整 text-shadow 的值，我们可以创建出不同的高亮效果。

.highlight {
  text-shadow: 0 0 10px #ff0;
}

这个例子中，我们将文本的阴影设置为黄色，使它看起来像是被标记出来的。

总结

通过使用 linear-gradient() 方法、box-shadow 属性或 text-shadow 属性，我们可以在 CSS 中实现文本高亮的效果。这些方法都很简单，只需要几行代码就可以实现，非常适合用于代码编辑器等场景。