CSS-字母后面的阴影

我想制作一个字母后面有阴影的文本效果，如下：

这是我的代码：

span{
字体系列：Calibri；
字号：110pt；
文本阴影：-14pt 18pt 4pt rgba（0,0,0,0.5）；
}

---

Text

这在编写核心CSS时是不可能的。

---

您只能使用由文本阴影生成的as。

您可以使用psuedo元素而不是阴影来执行此操作：

[数据阴影文本]{
位置：相对位置；
字体大小：150px；
}
[数据阴影文本]：：之前，
[数据阴影文本]：：之后{
内容：attr（数据阴影文本）；
}
[数据阴影文本]：：之前{
位置：绝对位置；
z指数：0；
顶部：-60px；
左：3px；
字体大小：1.2米；
/*文本比父文本大20%*/
颜色：透明；
/*隐藏文本*/
文本阴影：0 25px黑色；
/*仅从模糊创建阴影*/
变换原点：底部；
变换：旋转（75度）倾斜（15度）；
字母间距：-15px；
}
[数据阴影文本]：：之后{
位置：相对位置；
z指数：1；
}
身体{
利润率：20px080px；
}

---

这不完全一样，但你可以得到这个想法

span{
显示：内联块；
-webkit框大小：内容框；
-moz框大小：内容框；
框大小：内容框；
位置：相对位置；
填充：20px；
边界：无；
字体：标准100px/1“Oswald”，Helvetica，无衬线；
颜色：#e74c3c；
文本对齐：居中；
-o-text-overflow：省略号；
文本溢出：省略号；
字母间距：15px；
文本阴影：1px1px1pRGBA（0,0,0,0.2）；
}
跨度：之后{
-webkit框大小：内容框；
-moz框大小：内容框；
框大小：内容框；
z指数：-1；
位置：绝对位置；
内容：“文本”；
顶部：34px；
左：28px；
填充：20px；
边界：无；
字体：标准77px/1“Oswald”，Helvetica，无衬线；
颜色：rgba（255255,0.2）；
文本对齐：居中；
-o-text-overflow：省略号；
文本溢出：省略号；
字母间距：23px；
文本阴影：1px1px1pRGBA（0,0,0,0.2）；
-webkit变换：rotateX（50度）skewX（-30度）；
变换：rotateX（50度）skewX（-30度）；
}

---

Text

您可以使用translate方法及其矩阵属性：

我的JS小提琴示例：

HTML:

<div id="relative">

  <h1 id="title">TEXT</h1>
  <h1 class="shadow">TEXT</h1>
</div>

---

另一种展示方式

span{
颜色：黑色；
位置：相对位置；
字体系列：Calibri；
字号：110pt；
}
跨度：之前{
底部：2px；
颜色：rgba（0,0,0,0.1）；
内容：attr（title）；
左：9px；
位置：绝对位置；
文本阴影：0 20px灰色；
变换原点：底部；
变换：倾斜（30度）比例（0.8,1）；
z指数：-1；
}

---

Text

试试这个很好，但它不能解决我的问题解决这个问题的方法基本上与…试试这个链接：你的答案也很有帮助。谢谢

#relative{position:relative;margin:100px}

h1 {font-size:80px;margin:0}

h1.shadow {
  position:absolute;
  top:0;
  left:-25px;
  -ms-transform: matrix(1, 0, 0.7, 1, 0, 0); /* IE 9 */
  -webkit-transform: matrix(1, 0, 0.7, 1, 0, 0); /* Safari */
  transform: matrix(1, 0, 0.7, 1, 0, 0);
  text-shadow:2px 2px 4px rgba(0,0,0,0.6);
  opacity:1;color:rgba(0,0,0,0)
  }