内阴影在倾斜时变得混叠

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 被应用于父元素。没有办法完全摆脱这种情况，但您可以通过隐藏背面并添加translateZ(0)（如Woodrow Barlow's comment 中提到的）在很大程度上将其删除。额外的变换不会造成任何不良影响，因为它只是平移了 0px。

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

注意：backface-visibility 属性确实需要浏览器前缀。我在 sn-p 中使用了无前缀库以避免编写带前缀的版本。

#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 边框，如下面的 sn-p 所示，它可以使锯齿状边缘更加均匀。请注意，这确实增加了一点模糊效果，但边缘的锯齿状比上面的 sn-p 少。您可以根据需要使用或忽略此选项。

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