2

写真に示すように、使用するとインセットシャドウがエイリアシングされます

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

4

1 に答える 1

2

これは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>

さらに、以下のスニペットのように非表示の 1 ピクセルの境界線を追加すると、ギザギザのエッジがさらに均一になります。これにより少しぼかし効果が追加されますが、エッジは上記のスニペットよりもギザギザが少ないことに注意してください。必要に応じて、このオプションを使用または無視できます。

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

于 2015-07-23T14:39:14.437 に答える