如何为多行文本的下半部分添加阴影背景与彩色描边？

嘿，这个效果用CSS就能完美搞定！核心思路是利用线性渐变背景实现每行下半部分的阴影，再配合伪元素+裁剪来做下半部分的彩色描边。话不多说，直接上代码和解释：

完整实现代码 #

HTML结构 #

<div class="stylized-text" data-text="第一行文本内容，测试多行效果
第二行文本，看看下半部分的描边和阴影
第三行更长的文本，确保每行都能正确应用样式">
  第一行文本内容，测试多行效果
  第二行文本，看看下半部分的描边和阴影
  第三行更长的文本，确保每行都能正确应用样式
</div>

这里用data-text属性给伪元素提供文本内容，保证伪元素和原文本完全一致。

CSS样式 #

.stylized-text {
  font-size: 2rem;
  line-height: 2; /* 关键：设置合适行高，方便分割文本上下部分 */
  position: relative;
  color: #2d3748; /* 文本主体颜色 */
  width: fit-content;
  padding: 0.2em;
  /* 实现每行下半部分的阴影背景 */
  background-image: linear-gradient(to bottom, transparent 50%, rgba(255, 187, 0, 0.2) 50%);
  background-size: 100% calc(2rem * 2); /* 背景高度和行高保持一致 */
  background-repeat: repeat-y;
}

.stylized-text::after {
  content: attr(data-text); /* 复制原文本内容 */
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1; /* 放在原文本后方 */
  color: transparent; /* 隐藏伪元素的文本颜色 */
  /* 给文本下半部分添加彩色描边 */
  -webkit-text-stroke: 2px #e53e3e;
  /* 只显示文本的下半部分 */
  clip-path: inset(50% 0 0 0);
  /* 轻微下移，让描边同时覆盖文本下方区域 */
  transform: translateY(8%);
}

关键细节解释 #

• 阴影背景：通过linear-gradient把背景分成上下两部分，上半透明下半是阴影色，background-size和line-height绑定，确保每行的阴影都精准对齐。
• 下半部分描边：用伪元素复制文本后，通过clip-path: inset(50% 0 0 0)裁剪掉上半部分，只保留下半段；再用-webkit-text-stroke添加彩色描边，最后轻微下移伪元素，让描边同时覆盖文本的后方和下方区域。
• 多行适配：只要保持line-height和background-size的高度一致，不管多少行文本都能自动适配。

兼容性说明 #

• clip-path和-webkit-text-stroke在现代浏览器（Chrome、Firefox、Safari）都能正常工作；如果需要兼容旧版IE，可能需要用SVG滤镜替代，但现在大部分场景下现代浏览器的支持已经足够。

内容的提问来源于stack exchange，提问作者Nguyễn Việt