1枚の画像からサイズ可変な罫線を表示する(1):FirefoxとSafariのCSS

エ・ビスコム・テック・ラボ
2008-01-25 16:37:01
  • このエントリーをはてなブックマークに追加

最小限必要な設定

 最小限必要とされる設定は、最初の5つの記述だ。これらは罫線の画像のURLと、画像を9分割するときの分割位置を指定している。

-webkit-border-image: url(〜) A B C D

 分割位置を指定する4つの値(A〜D)では、順番に画像の上辺、右辺、下辺、左辺からの位置を指定する。値は数値または割合で指定することが可能で、数値で指定した場合の単位はピクセルとなる。また、割合(%)で指定すると、画像の大きさに対する割合となる。これにより、画像は4つのコーナーと4つの辺、中央部分の9つに分割される。

分割位置の指定 分割位置の指定

 たとえば、waku.pngという画像を各辺から18ピクセルの位置で9等分したい場合、次のように指定する。

waku.png waku.png
分割したい位置 分割したい位置
div{
-webkit-border-image: url("waku.png") 18 18 18 18;
}

 この設定を

細い罫線として表示された状態 細い罫線として表示された状態
ブラウザで表示を確認する
このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]