2

この新しい CSS3 のものはとても凝っていますが、レンダリングはブラウザ間で本当に一貫性がないようです (そして、私は影の形自体について話しているわけではありません)。

ここでは、Chrome では見栄えがよく、Firefox では境界線がギザギザになっている例を作成しました: http://jsfiddle.net/eBJxV/4/

ボックスの影を追加したので、背景色が透けて見えることに注意してください。Chrome の場合、translate3D でこの回避策がありますが、Firefox でできることはありますか?

JSFiddleでも見ることができるコードは次のとおりです

h1 {
    background-color: #E8501F;
    border-radius: 13px 0 0 13px;
    box-shadow: 2px 3px 3px rgba(0, 0, 0, 0.3);
    display: block;
    font-size: 18px;
    height: 30px;
    letter-spacing: 0.03em;
    padding: 0 20px;
    text-transform: uppercase;

    transform: matrix(0.997564, -0.0697565, 0.0697565, 0.997564, 0, 0);
    transform: rotate(-4deg) translate3d( 0, 0, 0);


    -webkit-transform: matrix(0.997564, -0.0697565, 0.0697565, 0.997564, 0, 0) translate3d( 0, 0, 0);
    -webkit-transform: rotate(-4deg) translate3d( 0, 0, 0);

    margin:10px 0;
    width:100px;
    font-weight:bold;
    font-family:Verdana;
    color:#ffffff;
}

body{
background-color:#FFF;
}

4

3 に答える 3

1

CSS フィルターで修正できます。

filter: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><filter id="gaussian_blur"><feGaussianBlur in="SourceGraphic" stdDeviation="0" /></filter></defs></svg>#gaussian_blur');

ここにjsfiddleがあります：

http://jsfiddle.net/eBJxV/14/

この情報 (およびその他の情報) は、私がこの件に関して少し前に書いたブログ投稿に記載されていることに注意してください。

http://www.useragentman.com/blog/2014/05/04/fixing-typography-inside-of-2-d-css-transforms/

お役に立てれば。

于 2015-07-09T17:40:58.553 に答える
0

古いFirefoxでこれに慣れている -moz

このように

h1 {

    -moz-transform: matrix(0.997564, -0.0697565, 0.0697565, 0.997564, 0, 0) translate3d( 0, 0, 0);
    -moz-transform: rotate(-4deg) translate3d( 0, 0, 0);

}
于 2012-12-06T10:26:12.803 に答える