带有文字装饰的文字阴影答案

【问题标题】：Text shadow with text decoration带有文字装饰的文字阴影
【发布时间】：2020-02-17 19:47:30
【问题描述】：

我正在寻找一种在 h2 标签上使用文本阴影的方法，并且在单词上也有下划线。问题是，文本阴影也在下划线上。如何使下划线没有文字阴影？

css:
.pagetitle {
  text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;
  text-decoration: underline;
  text-decoration-color: grey;
}

【问题讨论】：

标签： css

【解决方案1】：

您需要将下划线与文本分开。为此，您可以使用 linear-gradient 或伪元素 (::before) 生成带背景的下划线。

.pagetitle {
  display: inline-block;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
  background: linear-gradient(transparent calc(100% - 2px), grey calc(100% - 2px));
}

&lt;h2 class="pagetitle"&gt;I'm the Page Title&lt;/h2&gt;

【讨论】：

【解决方案2】：

您可以尝试使用边框，重置行高以使其更接近文本。

.pagetitle {
  text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;
  text-decoration-color: grey;
  color:green;
 border-bottom:solid;
  line-height:0.9em;
  width:max-content;/* use display:table; if max-content is not supported */
}
h1 + h1 { margin:auto;}/*possibly*/

<h1 class="pagetitle">My page title underlined</h1>
<h1 class="pagetitle">My page title underlined & centered</h1>

也可以使用伪。

如果您还希望在字母通过时切断下划线，那么，这里可能是重复的：Disable underline for lowercase characters: g q p j y?

【讨论】：

【解决方案3】：

您无法独立控制下划线阴影，但您可以使用边框底部或本文中描述的其他技巧之一：

https://css-tricks.com/styling-underlines-web/

【讨论】：