倾斜时内阴影会出现锯齿

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)（如中提到的）来在很大程度上消除它。额外的变换不会造成任何不良影响，因为它仅平移 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>

倾斜时内阴影会出现锯齿

Inner Shadow getting aliased when skewed

css

css-transforms

css-shapes

box-shadow