css - 内阴影在倾斜时变得混叠

Question

如图所示，当我使用时，嵌入的阴影变得混叠

-webkit-transform: skew(10deg);

它发生在chrome和firefox上，有解决方法吗？

丝网印刷：

    #BlockOutside {
	  background-color: #cfcfcf;
	  padding: 5px;
	  padding-left: 3px;
	  padding-right: 3px;
	  height: 25px;
	  width: 15px;
	  -webkit-transform: skew(10deg);
    }
    #BlockInside {
	  background-color: gray;
	  width: 100%;
	  height: 100%;
  	  -webkit-box-shadow: inset 0 0 5px black;
    }

<div id="BlockOutside">
  <div id="BlockInside"></div>
</div>

Answer 1

这是由于transform在父元素上应用了 。没有办法完全摆脱它，但您可以通过隐藏背面并添加一个（如Woodrow Barlow 的评论translateZ(0)中提到的）在很大程度上将其删除。额外的变换不会造成任何不良影响，因为它只是平移了 0px。

backface-visibility: hidden;
transform: skew(10deg) translateZ(0); /* translateZ(0) was added */

注意：该backface-visibility属性确实需要浏览器前缀。我在代码片段中使用了无前缀库来避免编写带前缀的版本。

#BlockOutside {
  background-color: #cfcfcf;
  padding: 5px;
  padding-left: 3px;
  padding-right: 3px;
  height: 50px;
  width: 30px;
  transform: skew(10deg) translateZ(0);
  backface-visibility: hidden;
}
#BlockInside {
  background-color: gray;
  width: 100%;
  height: 100%;
  box-shadow: inset 0 0 5px black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

<div id="BlockOutside">
  <div id="BlockInside"></div>
</div>

---

此外，您可以像下面的代码片段一样添加一个不可见的 1px 边框，它可以使锯齿状边缘更加均匀。请注意，这确实增加了一点模糊效果，但边缘的锯齿状比上面的片段少。您可以根据需要使用或忽略此选项。

#BlockOutside {
  background-color: #cfcfcf;
  padding: 4px 6px 6px 4px;
  height: 50px;
  width: 30px;
  transform-style: preserve3d;
  transform: skew(10deg) translateZ(0);
  backface-visibility: hidden;
  border: 1px solid transparent;
}
#BlockInside {
  background-color: gray;
  width: 100%;
  height: 100%;
  box-shadow: inset 0 0 5px black;
  border: 1px solid transparent;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

<div id="BlockOutside">
  <div id="BlockInside"></div>
</div>