0

HTML5video要素に微妙な CSS3 変換を適用していますが、Chrome のビデオの両側に不愉快な硬直したエッジが表示されます。

http://cl.ly/image/0v0m421N1J1U/Screen%20Shot%202012-07-16%20at%2021.57.37.png

私は解決策を求めてインターネットを見回しました。エッジを隠すために白い境界線またはボックスの影を追加することを提案する人もいますが、うまくいきませんでした. -webkit-backface-visibilityまた、プロパティを非表示に設定しようとしました。他に考えられる回避策はありますか?

4

1 に答える 1

2

私はこれを少し遊んで、解決策を思いつくことができました：

.wrapper {
  -webkit-transform: rotate(30deg) translate(100px,100px);
  position: relative;
  float: left
}

.wrapper:after {
 content: '';
 position: absolute;
 display: block;
 top: 0;
 bottom: 0;
 left: 0;
 right: 0;
box-shadow: inset 0 0 0 1px #fff, 0 0 0 1px #fff;

}

video {
  display: block;
}
​

これは、ビデオの上の疑似要素であり、2つのボックスシャドウがあり、1つはインセット、もう1つはアウトセットです。このソリューションは、背景が単色の場合にのみ機能します。

http://jsfiddle.net/5SuGb/ </ p>

于 2012-07-17T15:34:36.793 に答える