4


1

CSS 3 border-imageはどのように正確に機能しますか?

サイズが4x4の画像があり、DIVの境界線全体で使用したい。 以下:

-moz-border-image: url("../images/window/side.png") 4 4 4 4 / 4px 4px 4px 4px repeat repeat

左右の境界線を配置しますが、下と上には配置しません。 どうしたんだ? 私は構文を誤解していると思いますが、そうであれば、この構文は実際にどのように機能しますか?

2 Answer


3


4x4画像を境界線に沿って並べて表示する場合は、境界線が既にタイル表示されている正方形のボックスのように見える12x12の新しい画像を作成する必要があります。 これと同様に、各ダイヤモンドは4x4の画像になります:

画像:https://www.w3.org/TR/css3-background/border.png [alt text]

次に、このCSSを使用します。

border-image: url("border.png") 4 repeat;

http://www.w3.org/TR/css3-background/#border-images [公式仕様]の例は、それを少し明確にするかもしれません。


0


+ -moz-border-image:url(" ../ images / window / side.png ")4 / 4px repeat; または -moz-border-image:url(" ../ images / window / side.png ")4繰り返し; + with border-width:4px; +?