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

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

罫線の太さの指定

 罫線の太さの指定は、-webkit-border-imageプロパティのオプションとして、分割位置の指定の後に記述できる。このとき、分割位置の指定とオプションの間は「/(バックスラッシュ)」で区切るようにする。

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

 罫線の太さの値は、border-widthプロパティの値と同じ形で指定することができる。次のように18pxと指定すると、4つの各辺は18ピクセルの太さで表示される。

罫線を18ピクセルで表示したもの 罫線を18ピクセルで表示したもの
div{
-webkit-border-image: url("waku.png") 18 18 18 18 / 18px;
}
ブラウザで表示を確認する

 辺ごとに太さを変えることも可能だ。次のように指定すると、上辺を10ピクセル、右辺を20ピクセル、下辺を30ピクセル、左辺を40ピクセルで表示する。

辺ごとに罫線の太さを変えて表示したもの 辺ごとに罫線の太さを変えて表示したもの
div{
-webkit-border-image: url("waku.png") 18 18 18 18 / 10px 20px 30px 40px;
}
ブラウザで表示を確認する

 また、-webkit-border-imageプロパティのオプションを使用せず、border-widthプロパティで指定することもできる。ここでは、太さを30ピクセルに指定している。

border-widthで太さを指定したもの border-widthで太さを指定したもの
div{
-webkit-border-image: url("waku.png") 18 18 18 18;
border-width: 30px;
}
ブラウザで表示を確認する

 なお、こうして表示を確認すると、9つに分割した画像のうち、4つの辺と中央の画像はコンテンツの横幅と高さに合わせて引き伸ばされていることがわかる。-webkit-border-imageプロパティでは、これらを引き伸ばさずに、繰り返しタイリングして表示するように指定することも可能だ。詳しくは、次回に紹介したいと思う。

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