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>

您能否仅使用“文本阴影” CSS属性创建水平翻转的文本阴影

2 个答案: