4

私は現在 CSS3border-imageをいじっていて、Chrome と FireFox (最新バージョン) の間で画像の適用方法に違いがあることに気付きました。

私は非常に基本的な例をいじっています。それによって、border-imageいくつかのtextareaタグに を適用して、さまざまな効果を調べています。

FireFox では、イメージはセクションに分割され、期待どおり境界セクションに適用されます。中央はさすがに透明。

Chrome では、境界線で同じことを行いますが、画像の中心も表示します。

ブラウザが適用するデフォルト設定/スタイルがあり、あるブラウザでは透過性が発生しますが、他のブラウザでは透過性が発生しませんか?

それは私がオーバーライドできる設定/スタイルですか?

フィドル

編集

私は、ブラウザが単純にそれを行うことを見て、CSS で動作をオーバーライトできない場合、2 つのブラウザ間で画像が同じように適用されるようにするにはどうすればよいでしょうか?

フィドルが古くなった場合に備えて、以下のコードも含めました。

HTML:

<textarea class="no-image">some default text</textarea>
<textarea class="stretch">some default text</textarea>
<textarea class="round">some default text</textarea>
<textarea class="repeat">some default text</textarea>​

CSS:

textarea{
    border: 50px solid #feb515;
    border-radius: 15px;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    width: 500px;
    height: 100px;
    padding: 15px;
    border-image-slice: 5;
}

textarea.stretch{
    border-image: url(http://www.w3.org/TR/css3-background/groovy-border-image-slice.png) 100 stretch;
    -moz-border-image: url(http://www.w3.org/TR/css3-background/groovy-border-image-slice.png) 100 stretch;
    -webkit-border-image: url(http://www.w3.org/TR/css3-background/groovy-border-image-slice.png) 100 stretch;
}


textarea.round{
    border-image: url(http://www.w3.org/TR/css3-background/groovy-border-image-slice.png) 100 round stretch;
    -moz-border-image: url(http://www.w3.org/TR/css3-background/groovy-border-image-slice.png) 100 round stretch;
    -webkit-border-image: url(http://www.w3.org/TR/css3-background/groovy-border-image-slice.png) 100 round stretch;
}

textarea.repeat{
    border-image: url(http://www.w3.org/TR/css3-background/groovy-border-image-slice.png) 100 repeat round;
    -moz-border-image: url(http://www.w3.org/TR/css3-background/groovy-border-image-slice.png) 100 repeat round;
    -webkit-border-image: url(http://www.w3.org/TR/css3-background/groovy-border-image-slice.png) 100 repeat round;
}​
4

1 に答える 1

1

だから私はそれを機能させました-なぜそれが機能しているのかわかりません。

http://jsfiddle.net/6ysfr/2/

境界線の幅がborder-imageで指定された数と一致する必要があるかもしれないと思います.border-image-sliceが混乱している可能性があります.

気にしないでください-あなたの言うとおりだと思います-border-image-sliceを使用すると、クロムの「塗りつぶし」で奇妙な動作が発生します。私の例は、ボーダー スライスのオフセットがないために機能します。

于 2012-10-04T14:10:15.270 に答える