CSS3のborder-imageは興味深い。
画像素材を元に可変サイズの枠を描画しようと思ったとき、9分割したパーツを使うというのはすぐに思いつく方法。
コーナーはたいていの場合そのままで良いとして、問題は長さが変わる辺や中央部分。タイル状に画像を繰り返しつなぎ合わせて長さを変えられるようにするというのはすぐに思いつく方法だろう。
border-image-repeatにはstretch、repeat、round、spaceのいずれかが指定でき、これが伸び縮みする部分をどう処理するかの指定値となる。
stretchは辺のパーツ一枚をそのまま辺の長さに合わせて伸縮するというやり方。
repeatは辺の長さに合わせて画像を繰り返す。辺の長さが画像の長さの整数倍で無い場合は、あまりが出る。このあまりは画像を途中で断ち切ることで対処する。素材によってはコーナーとのつなぎ目が不自然になる。(あまりは一方のコーナー側だけに余らせるのでは無く、左右(上下)に均等に余らせ、両方断ち切るようだ)
roundは辺の長さに合わせて画像を繰り返すのだが、辺の長さが画像の長さの整数倍になるように、一つの画像の長さを伸縮することで対処する。コーナーとのつなぎ目は自然になりやすいが、辺の画像の縦横比やピッチは犠牲になりがち。(繰り返しの個数は伸び縮みが最小になるように決めるのだと思う 追記:Firefoxで試したところ拡大せずに縮小だけで対処するようだ。このやり方だと少しだけ拡大するだけで済むところを極端に縮小してしまう場合がある)
spaceは、調べたけれど今ひとつ分からなかった。