如何使用CSS应用带有描边的文本阴影？

Question

我想将此文本的样式设置为与附加图像完全相同，尝试使用文本阴影但没有得到完全相同的结果。我想在阴影文本上添加边框。请提供更好的解决方案！

谢谢

body {
  background-color: black;
}

.stroke-shadow {
  color: white;
  text-shadow: -7px -7px 0px #FF29ED;
}

p {
  font-weight: 700;
  font-size: 200px;
}

<p class="stroke-shadow">CREATE</p>

Answer 1

您可以使用伪元素和 text-lines 来完成此操作。通过使用数据属性，您可以将内容排除在 CSS 之外。如果您愿意，您还可以根据文本内容使用 JavaScript 轻松生成属性。

// As an alternative to manually implementing data attributes...
document.querySelectorAll('.stroke-shadow').forEach(el => {
  el.setAttribute('data-othertext', el.textContent);
});

body {
  background-color: black;
}

p {
  font-weight: 700;
  font-size: 200px;
  font-family: sans-serif;
}

.stroke-shadow {
  color: #fff;
  position: relative;
}

.stroke-shadow::before {
  content: attr(data-text);
  position: absolute;
  left: -12px;
  width: 100%;
  top: -12px;
  height: 100%;
  color: #000;
  -webkit-text-stroke: 3px #FF29ED;
  z-index: -1;
}

<p class="stroke-shadow" data-text="CRE">CRE</p>

Answer 2

更新：2024 年 12 月 9 日

为了避免在 CSS 中添加字符串，我们可以利用

attr()

CSS 函数。这将使用所选 HTML 标记中特定属性中的值。

在本例中，我向元素添加了

data-content

属性，并在

content

伪元素的

:before

属性中引用了它。

body {
  background-color: black;
}

.stroke-shadow {
  color: white;

  position: relative
}

.stroke-shadow:before {
  content: attr(data-content);
  color: black;
  
  -webkit-text-stroke: 2px #FF29ED;
  position: absolute;
  z-index: -1;
  top: -5px;
  left: -5px;
}


p {
  font-weight: 700;
  font-size: 100px;
}

<p class="stroke-shadow" data-content="CREATE">CREATE</p>

首字母：

仅适用于 CSS 的一种解决方案是使用

:before

伪元素。但是，这需要在内容规则中添加特定字符串。

body {
  background-color: black;
}

.stroke-shadow {
  color: white;

  position: relative
}

.stroke-shadow:before {
  content: "CREATE";
  color: black;
  
  -webkit-text-stroke: 2px #FF29ED;
  position: absolute;
  z-index: -1;
  top: -5px;
  left: -5px;
}


p {
  font-weight: 700;
  font-size: 100px;
}

<p class="stroke-shadow">CREATE</p>