你可以只使用 "text-shadow" CSS 属性创建水平翻转的文本阴影吗

Question

可以使用例如 text-shadow: 5px 10px; 在 CSS 中创建文本阴影。但是，如果我想模拟一个真实的阴影，通常需要水平翻转阴影并可能稍微缩放它（取决于假定光源的位置）。

我的问题是，是否可以仅使用 text-shadow 属性来创建这种效果，例如

text-shadow: -100px 200px 69px rgba(0,0,0,0.2);

语法，但带有用于翻转的额外参数。或者那是不可能的，我不得不求助于手动复制原始文本并对其执行标准转换？

谢谢。

Answer 1

我认为唯一的方法是复制文本：

.box {
  font-size:30px;
  margin:20px;
  display:inline-block;
  position:relative;
}
.box:before,
.box:after{
  content:attr(data-text);
}

.box:after {
  position:absolute;
  top:0;
  left:0;
  
  /*text-shadow: 50px 20px 2px rgba(0,0,0,0.4);*/
  filter:blur(2px);
  transform:translate(50px,20px) rotate(15deg);
  color:rgba(0,0,0,0.4);
}

<div class="box" data-text="some text"></div>

Answer 2

您可以使用 ::after 伪元素和 transform 属性:

实现此效果

html, body{
  height: 100%;
}
body{
  display: flex;
  align-items: center;
  justify-content: center;
}
.shadow{
  font: 80px sans-serif;
  text-shadow: -100px 200px 69px rgba(0,0,0,0.2);
}
.shadow::after{
  content: "Shadow Text";
    display: block;
    color: rgba(0,0,0,.65);
    transform: rotate3d(1, 0, 0, 148deg) scale(1, 3) skew(-50deg, 0deg);
    margin: 12px 0 0 35px;
}

<span class="shadow">Shadow Text</span>

你可以只使用 "text-shadow" CSS 属性创建水平翻转的文本阴影吗

Can you create a horizontally flipped text shadow using only "text-shadow" CSS property

html

css

css-transforms

你可以只使用 "text-shadow" CSS 属性 创建水平翻转的文本阴影吗

Can you create a horizontally flipped text shadow using only "text-shadow" CSS property

html

css

css-transforms

你可以只使用 "text-shadow" CSS 属性创建水平翻转的文本阴影吗