Firefox 3.5のCSS新対応:text-shadow、-moz-box-shadow、-moz-border-image、-moz-column-rule

エ・ビスコム・テック・ラボ
2009-08-24 15:42:01
  • このエントリーをはてなブックマークに追加

1枚の画像で枠を作る -moz-border-image

 border-imageプロパティをサポートしたことで、1枚の画像からサイズ可変な罫線を表示できるようになった。ただし、border-imageにはベンダープレフィックス「-moz-」をつけて記述する。

 たとえば、次のサンプルではwakublue.pngという画像を利用して、テキストを囲む罫線を表示している。

罫線の画像 罫線の画像
Firefox 3.5の表示 Firefox 3.5の表示
div{
-moz-border-image: url("wakublue.png") 20 20 20 20 / 20px;
}
今日はいい天気です。今日はいい天気です。今日はいい天気です。今日はいい天気です。今日はいい天気です。今日はいい天気です。今日はいい天気です。今日はいい天気です。今日はいい天気です。今日はいい天気です。今日はいい天気です。今日はいい天気です。
ブラウザで表示を確認する

 なお、border-imageプロパティはCSS 3の草案「Backgrounds and Borders」で提案されいる。1枚の画像から罫線を表示する仕組みなどについては、以下の記事を参照してほしい。

参照記事

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