内阴影在倾斜时变得模糊

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

这是由于在父元素上应用了use strict; use warnings; use XML::Twig; my $twig = XML::Twig->new; $twig->parsefile('install.xml'); my $filter = '6.0'; for my $number ( $twig->findnodes('/Install/version/number') ) { $number->parent->delete if $number->trimmed_text eq $filter; } $twig->set_pretty_print('indented_c'); $twig->print; 。没有办法彻底摆脱这种情况，但你可以通过隐藏背面并添加transform（如Woodrow Barlow's comment中提到的那样）来将其删除到很大程度。额外的变换不会产生任何不良影响，因为它只能翻译0px。

translateZ(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;
}

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

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

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

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