Question

我遇到了以下问题：我想要带有背景和框阴影的标题。现在，由于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/

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

由于

Answer 1

尝试在H2标记中添加span：

<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%;

堆叠在标题后面的伪元素（作为盒子阴影替代）

1 个答案: