3

シンプルなボタンのデザインにCSS3 を使用しようとしていborder-imageます: 画像の左のスライスはテキストの左の境界線、右のスライスは右の境界線、中央のスライスは繰り返されるべきです (または引き伸ばされます - それは問題ではありません) ) 背景として。サポートしていないブラウザーのフォールバックが必要ですborder-image。中央のスライスを背景として使用するだけで、エッジなしで問題ありません。問題は、私がこれを行う場合です：

.button {
    border: solid 1px white;
    border-size: 0 5px;
    background: ('button-slice.png') repeat;
    border-image: url('button.png') 0 5 0 5 fill;
    -moz-border-image: url('button.png') 0 5 0 5;
    /* repeat for other vendor prefixes */
}

プロパティの画像backgroundが境界線に重なり、サポートするブラウザのボタンが台無しになりますborder-image。

この問題を解決する軽量な方法はありますか (modernizr または同様の JavaScript チェックを導入することなく)?

4

3 に答える 3

0

border-imageフォールバックには注意が必要です。やっている...

.button {
    border: solid 1px white;
    border-size: 0 5px;
    background: ('button-slice.png') repeat;
    background: rgba(0,0,0,0);
    border-image: url('button.png') 0 5 0 5 fill;
    -moz-border-image: url('button.png') 0 5 0 5;
    /* repeat for other vendor prefixes */
}

IE9 を除くすべてのブラウザで動作するはずです。

左右の境界線しかないので、疑似要素を使用することをお勧めします...

.button {
    border: solid 1px white;
    background: ('button-slice.png') repeat;
    position: relative;
}

.button:before, .button:after {
  content: '';
  width: 5px;
  position: absolute;
  height: 100%;
  background: transparent url('button.png') 0 0 no-repeat;
  top: 0;
}

.button:before {left: -5px;}
.button:after {right: -5px;}

この手法は、最新のすべてのブラウザーと IE8 で適切なボタンを表示する必要があります。古いブラウザはエッジなしでフォールバックします。

于 2012-08-27T17:21:24.297 に答える
0

FF の新しいバージョンは両方のborder-imageパラメーターをサポートし、一方が他方をオーバーライドしているようです。

次のように、これらの行の順序を逆にしてみてください。 

-moz-border-image: url('button.png') 0 5 0 5;
border-image: url('button.png') 0 5 0 5 fill;

このように、両方のパラメーターをサポートし、後者のパラメーターでオーバーライドするブラウザーは、塗りつぶされたバージョンを取得します。

于 2012-09-03T13:02:32.327 に答える
0

ボーダー画像0 5 0 5を1 1 5 1次のように変更します。

border-image: url('button.png') 1 1 5 1 fill;
-moz-border-image: url('button.png') 1 1 5 1;

ボーダー画像ジェネレータオンライン

于 2012-08-27T17:11:21.023 に答える