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。没有办法完全消除这种情况，但您可以通过隐藏背面并添加 translateZ(0)(如 Woodrow Barlow's comment 中所述)在很大程度上消除它。额外的变换不会造成任何不良影响，因为它仅平移 0 像素。

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>