将Figma设计转代码：如何用CSS实现文字内阴影效果？

CSS原生text-shadow不支持inset关键字，无法直接实现文字内阴影，你之前的代码用text-shadow实现的是外阴影，因此和设计效果不符。以下是两种精准模拟文字内阴影的方案：

方案一：伪元素偏移叠加法 #

通过生成文字副本作为阴影层，偏移后置于主文字下方，模拟内阴影视觉效果：

<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
<h1 data-text="This is some text">This is some text</h1>

h1 {
  position: relative;
  font-family: 'Poppins';
  font-style: normal;
  font-size: 80px;
  text-align: center;
  color: #6225E6;
  background-color: #151717;
}

h1::before {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  color: #D63737;
  z-index: -1;
  transform: translateX(-6px);
  /* 可选：添加轻微模糊让阴影更自然 */
  /* filter: blur(0.5px); */
}

方案二：裁剪遮罩法 #

使用clip-path裁剪主色文字层，露出下方的阴影文字层，完美还原嵌入文字内部的阴影效果：

<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
<h1 data-text="This is some text">This is some text</h1>

h1 {
  position: relative;
  font-family: 'Poppins';
  font-style: normal;
  font-size: 80px;
  text-align: center;
  background-color: #151717;
}

h1::before,
h1::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

/* 底层阴影文字 */
h1::before {
  color: #D63737;
}

/* 上层主色文字：裁剪左侧区域露出阴影 */
h1::after {
  color: #6225E6;
  clip-path: polygon(6px 0, 100% 0, 100% 100%, 6px 100%);
}

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