使用CSS在文本中添加内阴影

Question

.leftSide > p {
font-size: 170px;
font-family: 'QuickSand';
text-align: end;
color: #2A2A2A;
-webkit-background-clip: text;
background-clip: text;
text-shadow: 1px 1px 5px  rgba(0, 0, 0, 0.25), -1px -1px 5px rgba(0, 0, 0, 0.25);
}

<div className={styles.leftSide}>
   <p>A</p>
</div>

所以我有这个 Figma 设计，我需要在文本中添加内部阴影。Figma 设计

这是迄今为止我的代码：

.leftSide > p {
font-size: 170px;
font-family: 'QuickSand';
text-align: end;
color: #2A2A2A;
-webkit-background-clip: text;
background-clip: text;
text-shadow: 1px 1px 5px  rgba(0, 0, 0, 0.25), -1px -1px 5px rgba(0, 0, 0, 0.25);
}

<div className={styles.leftSide}>
   <p>A</p>
</div>

知道我如何才能使这项工作成功，因为我尝试了一些东西，但没有任何效果。所以我想我可以在这里寻求帮助。

感谢回报

Answer 1

将 .leftSide 类添加到您的 CSS 中。

.leftSide{
background-color:#1e1e1e;
width:fit-content;
}

.leftSide > p {
color:#2a2a2a;
font-size: 170px;
font-family: 'QuickSand';
text-align: end;
-webkit-background-clip: text;
background-clip: text;
text-shadow: 1px 1px 5px  rgba(0, 0, 0, 0.25), -1px -1px 5px rgba(0, 0, 0, 0.25);
}

<div class="leftSide">
   <p>ABCDEFG</p>
   </div>