如何使用CSS为网站创建渐变文本选中效果？

你的代码思路方向对，但直接给::selection设置渐变背景是无效的——CSS规范里::selection的background属性并不支持渐变值。要实现渐变文本选中效果，得换个思路：通过background-clip: text让渐变只作用于文字，同时把选中状态的文字颜色设为透明，再给渐变背景。

以下是正确的实现代码：

<!doctype html>
<p>Some Text</p>
<style>
p {
  /* 基础渐变文本样式 */
  background: linear-gradient(#e66465, #9198e5);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* 兼容旧版火狐的选中状态 */
::-moz-selection {
  background: linear-gradient(#e66465, #9198e5);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* 标准选中状态 */
::selection {
  background: linear-gradient(#e66465, #9198e5);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
</style>

关键说明： #

• 先给目标文本元素设置渐变背景，用background-clip: text将背景裁剪到文字区域，同时把文字颜色设为透明，实现常态下的渐变文字；
• 选中状态需重新声明渐变与裁剪规则，因为::selection会覆盖原元素的部分样式；
• 保留::-moz-selection前缀，确保旧版火狐浏览器的兼容性。

如果你的需求是选中时背景为渐变、文字颜色不变，这种效果无法通过::selection直接实现（因为它不支持渐变背景），只能通过伪元素模拟实现，但复杂度会高很多。上面的方案是目前实现渐变文本选中的标准可行方式。

内容的提问来源于stack exchange，提问作者QuickMash