1. TOP
  2. HTML,CSS
  3. 最新のブラウザはborder-radiusを実装

最新のブラウザはborder-radiusを実装

HTML,CSS
この記事は約 3 分で読めます。 15 Views

FirefoxがバージョンアップされてFirefox4になりましたが、他のブラウザも随時アップデートされていますね。
ホームページを製作しているとよく使うのが「角丸」です。

今まではInternetExplorerは使えなかったし、FirefoxとSafari、 Chromeは別々にCSSを書かないといけませんでした。
上部の左右を20pxの角丸にする場合はこのように書いていました。

-moz-はFirefox用、-webkit-はSafariとGoogle Chrome用です。
各位置の指定の仕方が違うのでかなり面倒くさかったのです。

でも、最新のブラウザ(4、9、)はborder-radiusが使えるようになったのでこのように書けば良くなりました。

数字は左上から時計回りです。左上、右上、右下、左下になります。

これでCSSを書くのが楽になりました。 個別に角丸を指定するのはこのように書きます。

各ブラウザでCSSの認識が統一されるのはウェブサイトを作るのにはとてもやりやすくなりました。
ただ、FirefoxとSafariは半強制的にアップデートされますが、IE9はXPでは使えないし、強制的にはアップデートされないし。
まだまだ、XPとIE6を使っている人が多いのでハッキングは必要ですね。

関連する投稿:


\ SNSでシェアしよう! /

集客特化型ホームページの制作は愛媛県の魁文堂の注目記事を受け取ろう

NO IMAGE

この記事が気に入ったら
いいね!しよう

集客特化型ホームページの制作は愛媛県の魁文堂の人気記事をお届けします。

  • 気に入ったらブックマーク! このエントリーをはてなブックマークに追加
  • フォローしよう!

ライター紹介 ライター一覧

能瀬 耀

この人が書いた記事  記事一覧

  • NEC ValueStar VW770/L PC-VW770LS6R の分解修理、ハードディスク交換

  • 集客が倍増するホームページ

  • ランサムウェアのファイルを復元(RannohDecryptor.exeの使い方)

  • ホームページの集客(売り上げ)改善のポイント

関連記事

  • Googleがコンテンツファームアルゴリズムを導入

  • サイドメニューのプルダウンメニューを作ってみた