All Articles Web
CSS3でレイアウトオブジェクトで角丸を作成
Geoff Blake on Thu, April 21st 0 comments
If you haven't been doing much reading up yet on what's new in CSS3, it's pretty awesome. There are all sorts of newly introduced possibilities, including gradients, multiple columns, border images, a

あなたがやっていない場合はかなりの新機能にはまだアップ読書CSS3 、それはすごいです。グラデーション、複数の列、枠線の画像、一つ我々は、国境の半径、ここを見て話すことでしょう含め、新たに導入された可能性のあらゆる種類があります。国境の半径は、当社のウェブレイアウトで特に長方形のオブジェクトに角丸を設定することができます。

Current versions of each popular browser support the new border radius property, but unfortunately it simply doesn't render in earlier versions. And that's the thorn in many web designer's side. However, I'll show you a cool trick to ensure it works in nearly every browser.

ステップ1 - CSS3ボーダーの半径を適用する

まず、境界線の半径を適用できます。あなたのスタイルシートでは、あなたが丸みを帯びた角の効果を適用したいのですがルールを見つけます。多くの場合、これは、div要素を制御しているIDのセレクタなります。確認してもあなたのコーナーを参照できるように、また背景色やボーダーを(または両方)を適用していることを確認!

次に、値に続くあなたのルールに" 国境の半径 "プロパティを、追加してください。使用する値が大きいほど、より多くのコーナーを丸く。

ここで、私はあなたが含まれているスクリーンショットで見ることができるように、私のページのコンテンツを保持するdivを制御している私の#コンテンツIDセレクタ、に境界線の半径を適用しています。作業内容を保存し、ブラウザでの作業をチェックアウトすることを確かめて下さい。

あなたはまだ90度の角を得ている場合は、お使いのブラウザはこの機能をサポートしていないものをいいます。しかしまだで物事を梱包しないでください。のは、先ほど述べたクールなトリックをチェックしてみましょう。

ステップ2 - 丸みを帯びた角の効果を確保ワークス

前述のとおり、一般的なブラウザの最新バージョンのみがCSS3の境界半径のプロパティをサポートしています。それでは、どのようにあなたのレイアウトはまだバージョンまたは2つの背後にあるブラウザを使用しているユーザーのために働くようにすることができますか?あなたは次のように、いくつかの追加コードを使用することができます。

最初に、に追加してみましょう"- moz - border - radiusで:"半径の値が続きます。特にFireFoxの - これは、Geckoブラウザと呼ばれるもの対象としています。

Nextで追加してみましょう" の- webkit - border - radiusで:"我々は上記で使用したのと同じ値が続きます。これはChromeやSafariのように、すべてのWebKitベースのブラウザを打つでしょう。が追加されると、作業を保存し、ブラウザをリフレッシュ。

ステップ3 - 例外ルールを証明する

今、あなたは、Internet Explorer、すべてのWebデザイナーのお気に入りのブラウザ( 原文のまま )約何を尋ねる?よく、上記のオプションのすべてが動作しません。実際に、我々はこの時点までに追加したコードは、単純にエクスプローラで無視され、そしてコーナーでは、単に右、それらのデフォルトでそれを破ることよりも優れている90度のスタイリングを、レンダリングします!我々は将来の先端に入ることのようなものかもしれないと、IEで丸みを帯びたコーナーやってのけるが、それは余分な作業のビットであることを認識することが可能です。当分の間、しかし、他のすべてのブラウザーで角丸をお楽しみください!

CSSは素晴らしいです。でより多くのを発見フローティングCSSレイアウトをデザインする


Comments (0)

You must be logged in to comment.

Feedback
Course Advisor
Don't Know Where To Start?
Ask A Course Advisor
Ask Us!
Copy the link below and paste it into an email, forum, or Facebook to share this with your friends.
Make money when you share our links
Become a macProVideo.com Affiliate!
The current affiliate rate is: 50%
Classes Start Next Week!
Live 8-week Online Certification Classes for: