时间戳

首页 > 解决方案 > 您能否仅使用“text-shadow”CSS 属性创建水平翻转的文本阴影

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

问题描述

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

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

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

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

谢谢你。

标签： htmlcsscss-transforms

解决方案

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

推荐阅读