在标题后面的伪元素之后堆叠（作为 box-shadow 替代）

Question

我遇到以下问题：我想要带有背景和 box-shadow 的标题。现在，由于 firefox 无法像魅力一样呈现变换旋转，我正在寻找替代方案。

h2 {
  padding: 1rem 2rem;
  display: inline-block;
  color: #FFF;
  background-color: #006AB3;
  transform: translateZ(1px) rotate(-3deg);
  transform-origin: 50% 50%;
  margin-bottom: rem-calc(50px);
  outline: 1px solid transparent;
  z-index:1;
  &:after{
            content: "";
            width: 100%;
            height: 100%;
            position: absolute;
            background: rgba(0,0,0,.3);
            right:-10px;
            bottom:-10px;
            outline: 1px solid transparent;
            z-index: -1;
        }
}

https://jsfiddle.net/gw64ove4/

为什么Element后面的伪元素没有堆在标题后面？在旋转元素上使用 box-shadow 时，是否还有其他抗锯齿解决方法？

谢谢

Answer 1

尝试在 H2 标签中添加跨度：

<h2>
<span>TEXT</span>
</h2>

和 CSS 的跨度如下：

span {display: block; position: relative; z-index: 10;}

https://jsfiddle.net/zLna2xLa/

您也可以尝试使用 -moz- 前缀

EG::

-moz-transform: translateZ(1px) rotate(-3deg);
  -moz-transform-origin: 50% 50%;

在标题后面的伪元素之后堆叠（作为 box-shadow 替代）

Stack after pseudo Element behind headline (as box-shadow alternative)

css

z-index