X Course Advisor FREE Course Advisor
(Close)
Watch Tutorials
macProVideo.com
Close

無料プレミアムアクセス

プレミアムハブの記事、プロジェクトファイルとから、各チュートリアルビデオの最初の10%の私たちのライブラリ全体にアクセスするオンラインチュートリアルのライブラリを

今すぐ無料アカウントを作成しよう!

CSS3でレイアウトオブジェクトで角丸を作成
Google翻訳で翻訳さ

あなたがやっていない場合はかなりの新機能にはまだアップ読書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レイアウトをデザインする


Geoff Blake

Geoff Blake | Articles by this author

Geoff Blake is a book author, video presenter, designer, and visual artist. As an in demand live-on-stage software educator since 1997, Geoff has taught desktop publishing, web design and graphics courses all over North America and is regarded as an expert in Adobe's Creative Suite applications, as well as in HTML, CSS, WordPress, and related technologies. With his humorous, non-jargonny approach, Geoff produces highly regarded articles, video training and DVDs, and regularly contributes to top industry magazines and websites.

Comments

You must be logged in to post a comment.
Create an Account  Login Now

What is macProVideo.com?

macProVideo.com is an online education community featuring Tutorial-Videos & Training for popular Audio & Video Applications including Adobe CS, Logic Studio, Final Cut Studio, and more.
© 2018 macProVideo.com
a division of NonLinear Educating Inc.
Link