検索
ホームページウェブフロントエンドhtmlチュートリアルCSS3 学習メモ border-radius_html/css_WEB-ITnose

CSS3 はとても良いと思い、少し読んでいくつかの属性を試してみました。私自身、CSS3を学習しましたと言える勇気はなく、自分にとって小さなことは自分の視点で判断するしかないと感じています。私の意見では、「単純な」HTML であっても研究する価値はあります。常に謙虚な姿勢を維持することによってのみ、より先を見据え、より着実に進むことができます。

ここの Web サイトに感謝したいと思います:

w3cplus、W3School、W3C およびその他のオンライン チュートリアルとブログ (他にもたくさんありますが、1 つずつリストすることはしません)。伝説的な CSS3 と HTML5 に触れると、私自身の学習ノートが自然にそこから得られます。


今日はCSS3のborder-radius

の角丸をご紹介します

あの頃を思い出してみてください...CSS2をベースに角丸を作るのはスキルと言えるでしょう! !さまざまな写真とさまざまなネスティング (「CSS をマスターする?? 高度な Web 標準ソリューション」で紹介されています)。ここではそのプロセスには触れません。オンラインで検索すると見つかります。要するに、私はそれが非常にハイエンドだと思っていました。 CSS3 を使用した後は、CSS3 を再度見たくなくなります)

しかし、CSS3 の角丸属性 border-radius の登場以来、大多数のフロントエンド エンジニアは多くのトラブルを回避できるようになり、これにより問題が軽減されるだけでなく、ワークロードが軽減されるだけでなく、Web サイトのパフォーマンスも向上します。 IE の高貴なローエンド バージョンが CSS3 のプロパティのほとんどをサポートしていないのは残念です...またはほとんどサポートしていません。優れた人々が IE 用の互換性ソリューションを数多く作成していますが、私はそれらをお勧めしません。多くの場合、角が丸いと見た目がエレガントになるだけで、基本的にユーザーの使用には影響しません。

角の丸い部分が表示されない場合は、IE のバージョンが低いだけです。 ! ! !

さて、この高貴な属性を正式に導入しましょう

border-radius の使用法:

属性名 border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius 、border-top-left-radius、border-radius
属性値 長さ(例:10px)
初期値 0
継承可能 継承不可

border-radius の値は、円弧の形状を決定します。各角の円弧は、実際には、この角に設定された値を半径として描画された円の 1/4 の円弧になります。

例: border-radius の値が 1 つだけの場合

set border-radius: 50px;

CSS コード:

 1: .test{
 2:     width:200px;
 3:     height:200px;
 4:     background:#368;
 5:     margin:80px auto;/*为了使元素居中,没有别的意思*/
 6:     -webkit-border-radius:50px;
 7:     -moz-border-radius:50px;
 8:     -o-border-radius:50px;
 9:     border-radius:50px;

 10: }
れーれー

れーれー

効果は次のとおりです。

効果をより明確にするために、border-radius の値を div.test の幅の半分である 100px に変更します。

ご覧のとおり、完全な円! ! ! !円の中心を通り、水平方向と垂直方向に線を引くと、各角の円弧は実際にはこの値を半径として描いた円の 1/4 の円弧であることがわかります。

別の例: border-radius に複数の値がある場合

Set border-radius: 100px 50px; (コードは上記と似ていますが、border-radius が変更されているため、繰り返しません)。

テスト後、私のGoogle、Firefox、IE9および10での効果は次のとおりです

上の写真のようであれば。左上隅を「左」、右上隅を「右」などに設定します。2 つの値の境界半径の規則は、マージンとパディングの規則と似ていることがわかります。最初の値は上と下を表し、2 番目の値は左と右を表します。

同様に set border-radius: 100px 50px 0px;

効果は次のとおりです:

Set border-radius: 100px 50px 25px 0px;

テスト後の効果は次のようになります

前に述べたように、border-radius 値の設定は、padding や miargin と同じで、非常に簡単です。

それでは、使い方をまとめてみましょう:

値が 1 つだけの場合、4 つの角は同じ円弧で丸められます。 値が 2 つしかない場合、最初の値は左上隅と右下隅を表し、2 番目の値は右上隅と左下隅を表します。値が 3 つある場合、最初の値は左上隅を表します。 、2番目の値は真ん中の値であり、3番目の値は右上隅と左下隅の値が4つある場合、左上の順序で表現されることを意味します。 、右上、右下、左下

全文はここで終わり、間違いがあります修正歓迎!!

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
HTMLのブール属性とは何ですか?いくつかの例を挙げてください。HTMLのブール属性とは何ですか?いくつかの例を挙げてください。Apr 25, 2025 am 12:01 AM

ブール属性は、値なしでアクティブ化されるHTMLの特別な属性です。 1.ブール属性は、無効化された入力ボックスを無効にするなど、存在するかどうかによって、要素の動作を制御します。 2.彼らの実用的な原則は、ブラウザが異なっているときに属性の存在に応じて要素の動作を変更することです。 3.基本的な使用法は、属性を直接追加することであり、高度な使用法はJavaScriptを介して動的に制御できます。 4.一般的な間違いは、値を設定する必要があると誤って考えており、正しい執筆方法は簡潔にする必要があります。 5.ベストプラクティスは、コードを簡潔に保ち、ブールのプロパティを合理的に使用して、Webページのパフォーマンスとユーザーエクスペリエンスを最適化することです。

HTMLコードをどのように検証できますか?HTMLコードをどのように検証できますか?Apr 24, 2025 am 12:04 AM

HTMLコードは、オンラインバリデーター、統合ツール、自動化されたプロセスを使用するとクリーンになります。 1)w3cmarkupvalidationserviceを使用して、HTMLコードをオンラインで確認します。 2)リアルタイム検証のためにVisualStudiocodeにhtmlhint拡張機能をインストールして構成します。 3)HTMLTIDYを使用して、建設プロセスでHTMLファイルを自動的に検証およびクリーニングします。

HTML対CSSおよびJavaScript:Webテクノロジーの比較HTML対CSSおよびJavaScript:Webテクノロジーの比較Apr 23, 2025 am 12:05 AM

HTML、CSS、およびJavaScriptは、最新のWebページを構築するためのコアテクノロジーです。1。HTMLはWebページ構造を定義します。2。CSSはWebページの外観に責任があります。

マークアップ言語としてのHTML:その機能と目的マークアップ言語としてのHTML:その機能と目的Apr 22, 2025 am 12:02 AM

HTMLの機能は、Webページの構造とコンテンツを定義することであり、その目的は、情報を表示するための標準化された方法を提供することです。 1)HTMLは、タイトルやパラグラフなどのタグや属性を使用して、Webページのさまざまな部分を整理しています。 2)コンテンツとパフォーマンスの分離をサポートし、メンテナンス効率を向上させます。 3)HTMLは拡張可能であり、カスタムタグがSEOを強化できるようにします。

HTML、CSS、およびJavaScriptの未来:Web開発動向HTML、CSS、およびJavaScriptの未来:Web開発動向Apr 19, 2025 am 12:02 AM

HTMLの将来の傾向はセマンティクスとWebコンポーネントであり、CSSの将来の傾向はCSS-in-JSとCSShoudiniであり、JavaScriptの将来の傾向はWebAssemblyとServerLessです。 1。HTMLセマンティクスはアクセシビリティとSEO効果を改善し、Webコンポーネントは開発効率を向上させますが、ブラウザの互換性に注意を払う必要があります。 2。CSS-in-JSは、スタイル管理の柔軟性を高めますが、ファイルサイズを増やす可能性があります。 CSShoudiniは、CSSレンダリングの直接操作を可能にします。 3. Webassemblyブラウザーアプリケーションのパフォーマンスを最適化しますが、急な学習曲線があり、サーバーレスは開発を簡素化しますが、コールドスタートの問題の最適化が必要です。

HTML:構造、CSS:スタイル、JavaScript:動作HTML:構造、CSS:スタイル、JavaScript:動作Apr 18, 2025 am 12:09 AM

Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。1。HTMLは、Webページ構造を定義し、2。CSSはWebページスタイルを制御し、3。JavaScriptは動的な動作を追加します。一緒に、彼らは最新のウェブサイトのフレームワーク、美学、および相互作用を構築します。

HTMLの未来:ウェブデザインの進化とトレンドHTMLの未来:ウェブデザインの進化とトレンドApr 17, 2025 am 12:12 AM

HTMLの将来は、無限の可能性に満ちています。 1)新機能と標準には、より多くのセマンティックタグとWebComponentsの人気が含まれます。 2)Webデザインのトレンドは、レスポンシブでアクセス可能なデザインに向けて発展し続けます。 3)パフォーマンスの最適化により、応答性の高い画像読み込みと怠zyなロードテクノロジーを通じてユーザーエクスペリエンスが向上します。

HTML対CSS対JavaScript:比較概要HTML対CSS対JavaScript:比較概要Apr 16, 2025 am 12:04 AM

Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。HTMLはコンテンツ構造を担当し、CSSはスタイルを担当し、JavaScriptは動的な動作を担当します。 1。HTMLは、セマンティクスを確保するためにタグを使用してWebページの構造とコンテンツを定義します。 2。CSSは、セレクターと属性を介してWebページスタイルを制御して、美しく読みやすくします。 3。JavaScriptは、動的でインタラクティブな関数を実現するために、スクリプトを通じてWebページの動作を制御します。

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

PhpStorm Mac バージョン

PhpStorm Mac バージョン

最新(2018.2.1)のプロフェッショナル向けPHP統合開発ツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 Linux 新バージョン

SublimeText3 Linux 新バージョン

SublimeText3 Linux 最新バージョン

mPDF

mPDF

mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

Eclipse を SAP NetWeaver アプリケーション サーバーと統合します。