html - 旋转的阴影文本

Question

我想要在这个水平平面上有文字阴影，并且文字漂浮在表面之上。阴影将倾斜以适合表面。有什么办法吗？我只使用 css 和 html。

.b {
  float:left;
  text-decoration:none;
  position:absolute;
  margin-left:20%;
  margin-top:10%;
  padding: 50px 100px;
  background:#DF0000;
  box-shadow: inset 20px 0 50px 0 #900000, inset -20px 0 50px 0 #900000, 0 10px 20px #000000;
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 50%;
  border-top-left-radius: 20%;
  border-top-right-radius: 20%;
}
.b2 {
  float:left;
  text-decoration:none;
  position:absolute;
  margin-left:20%;
  margin-top:112px;
  padding: 30px 100px;
  background:#760000;
  box-shadow: inset 0 0 10px 0 #000000;
  border-radius: 50%;
  transition: all ease-in-out 200ms;
}
.b2:hover {
  float:left;
  text-decoration:none;
  position:absolute;
  margin-left:20%;
  margin-top:120px;
  padding: 30px 100px;
  background:#760000;
  box-shadow: inset 0 0 10px 0 #000000;
  border-radius: 50%;
}

<div class="b"></div>
<div class="b2">
  <p></p>
</div>

抱歉，该片段更改了代码。看图片。我希望按钮顶部有文字。文本阴影将位于按钮表面。

Answer 1

您将需要文本的两份副本。一个将是文本本身，并且没有阴影。另一个将是阴影施法者。

您可以使文本 color: transparent 只显示其阴影。

#shadow {
  font-size: 24pt;
  margin: 20px;
  color: transparent;
  text-shadow: 0 0 6px 1px black;
}

<div id="shadow">SHADOWS</div>