如何在 CSS 中对文本创建内阴影效果？

Question

我正在尝试将 Figma 设计转换为代码，但它有一些使用内阴影效果的文本

我尝试使用纯文本设置样式并剪切 text-shadow CSS 属性，但结果与阴影类型剪辑/插入文本的设计不太匹配。

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

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

Answer 1

您可以使用掩码靠近（在 Firefox 中不起作用）

 h1 { font-family: 'Poppins'; font-size: 80px; letter-spacing: 5px; text-align: center; color: #0000; text-shadow: 5px 0 #6225E6, 0 0 red; -webkit-mask: linear-gradient(#000 0 0); -webkit-mask-clip: text; mask-clip: text; } body { background:#000; }

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

为了获得更好的支持，您可以复制文本并尝试如下：

 h1 { font-family: 'Poppins'; font-size: 80px; letter-spacing: 5px; text-align: center; color: #0000; text-shadow: 5px 0 #6225E6, 0 0 red; position: relative; } h1:before { content: attr(data-text); position: absolute; inset: 0; background: #000; color: #fff; mix-blend-mode: darken; text-shadow: none; } body { background: #000; }

 <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>

Answer 2

这种作品，我猜这取决于谁在看它，以及他们将什么解释为阴影与填充。 轻微的模糊是我试图让观察者偏离一点，但不幸的是，它也没有给你太多移动阴影的空间。 我认为任何人提出的任何解决方案都需要某种形式的视错觉才能使其发挥作用。

 body { background-color: #151717; } h1 { font-family: 'Poppins'; font-style: normal; font-size: 120px; background-color: #D63737; color: transparent; letter-spacing: 2px; text-shadow: 2px 2px 1px #6225E6, 1px 1px 1px #D63737; -webkit-background-clip: text; -moz-background-clip: text; background-clip: text; }

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

Answer 3

添加了这个名为letter-spacing CSS 属性

这使得每个字母之间都有一些小间隙，因此阴影不会触及其他字母。

letter-spacing: 6px;

文档： letter-spacing CSS 属性设置文本字符之间的水平间距行为。 在呈现文本时，此值会添加到字符之间的自然间距。 letter-spacing 的正值会使字符分开得更远，而 letter-spacing 的负值会使字符靠得更近。

 h1 { font-family: 'Poppins'; font-style: normal; font-size: 80px; text-align: center; color: #6225E6; text-shadow: -6px 0px 0px #D63737; background-color: #151717; letter-spacing: 6px; }

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