CSS3 border-radius 丸角の実装方法と使い方の詳しい説明

CSS3 border-radius 丸角の実装方法と使い方の詳しい説明

以前は、角を丸くするのは非常に面倒でしたが、CSS3 では、角を丸くするのは非常に簡単になり、border-radius という 1 つの文だけで済みます。以下、青島スターネットワークが border-radius の具体的な使用方法を紹介します。

CSS3 の丸い角には、 border-radius (「境界の半径」を意味する) という 1 つのプロパティのみを設定する必要があります。このプロパティに値を指定すると、4 つの角すべての半径が同時設定されます。すべての合法的な CSS メトリックを使用できます: em、ex、pt、px、パーセンテージなど。

border-radius のブラウザサポート

IE 9、Opera 10.5、Safari 5、Chrome 4、Firefox 4 はすべて border-radius プロパティをサポートしています。

Safari と Chrome の以前のバージョンでは、-webkit-border-radius プロパティがサポートされています。

Firefox の以前のバージョンでは、-moz-border-radius プロパティがサポートされていました。

現時点では、互換性を確保するためには、-moz-border-radius と border-radius を同時に設定するだけで済みます。

-moz-border-radius: 15px;
境界線の半径: 15px;

(注意: border-radius は最後に宣言する必要があります。そうでない場合は無効になる可能性があります。)

さらに、Firefox の初期バージョンでは、標準の構文とは若干異なる、単一の丸い角の構文が使用されていました。

-moz-border-radius-topleft (標準構文: border-top-left-radius)
-moz-border-radius-topright (標準構文: border-top-right-radius)
-moz-border-radius-bottomleft (標準構文: border-bottom-left-radius)
-moz-border-radius-bottomright (標準構文: border-bottom-right-radius)

border-radiusの例

#rcorners1 {
    境界線の半径: 25px;
    背景: #8AC007;
    パディング: 20px;
    幅: 200ピクセル;
    高さ: 150px;
}
 
#rcorners2 {
    境界線の半径: 25px;
    境界線: 2px 実線 #8AC007;
    パディング: 20px;
    幅: 200ピクセル;
    高さ: 150px;
}
 
#rcorners3 {
    境界線の半径: 25px;
    背景: url(paper.gif);
    背景位置: 左上;
    背景繰り返し: 繰り返し;
    パディング: 20px;
    幅: 200ピクセル;
    高さ: 150px;
}

CSS3 border-radius - 各角の丸みを指定します

border-radius プロパティに値を 1 つだけ指定すると、 4 つの丸い角が生成されます。

ただし、4 つのコーナーを 1 つずつ指定する場合は、次のルールを使用できます。

4 つの値: 最初の値は左上隅、2 番目の値は右上隅、3 番目の値は右下隅、4 番目の値は左下隅です。

3つの値:最初の値は左上隅、2番目の値は右上隅と左下隅、3番目の値は右下隅です

2つの値: 最初の値は左上隅と右下隅、2番目の値は右上隅と左下隅です

1つの値: 4つの角すべてが同じ丸みを帯びた値を持ちます

CSS3 border-radius 単一丸角設定

4つの角の丸みを一括で設定できるほか、各角を個別に設定することもできます。 4 つのコーナーに対応して、CSS3 では 4 つの個別のプロパティが提供されます。

左上の境界線の半径

境界線の右上の半径

境界線の右下の半径

左下の境界線の半径

CSS3 border-radius 丸角の実装と使用法に関するこの記事はこれで終了です。CSS3 border-radius 丸角に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<:  Javascriptの基礎を学ぶための10の重要な質問

>>:  MySQL binlog を使用して誤って削除されたデータベースを復元する方法

推薦する

複数のネットワークカードを備えた Linux システムでのルーティング構成の詳細な説明

Linux でのルーティング設定コマンド1. ホストルーティングを追加する ルートを追加 -host...

FirefoxのWeb開発者を使用してWebページのスタイルを無効にする方法

前提条件: Web開発者プラグインがインストールされている操作手順: [ツール] -> [We...

JavaScript オブジェクト (詳細)

目次JavaScript オブジェクト1. 定義2. オブジェクトの分類3. オブジェクトを定義する...

MySQL でのテーブルの作成と削除の詳細な例

テーブル作成コマンドには以下が必要です。 テーブルの名前フィールド名各フィールドを定義します(タイ...

Vue カスタム箇条書きボックス効果 (確認ボックス、プロンプトボックス)

この記事の例では、参考のためにVueカスタムポップアップ効果の具体的なコードを共有しています。具体的...

Docker マルチステージビルドを使用してイメージサイズを縮小する方法

この記事では、Docker のマルチステージ ビルド機能を使用してイメージ サイズを大幅に削減する方...

Nginx の純粋な構成でリアルタイム ログ レポートを実現するためのアイデアと方法

目次序文実装のアイデア実装手順1. Nginxをコンパイルする2. 設定ファイルは以下のとおりです要...

vueはEle.me UIを使用してteambitionのフィルタリング機能を模倣します

目次問題の説明一般的な機能効果は次のとおりです。思考分析完全なコード要約する問題の説明Teambit...

Mysql の読み取り/書き込み分離期限切れに対する一般的な解決策

MySQLの読み書き分離の落とし穴読み取りと書き込みの分離の主な目的は、メイン データベースの負荷を...

HTML チュートリアル: よく使われる HTML タグのコレクション (4)

関連記事:初心者が学ぶ HTML タグ (3)導入された HTML タグは、必ずしも XHTML 仕...

クラウドネイティブテクノロジー Kubernetes (K8S) の紹介

目次01 Kubernetes とは何ですか? 02 KubernetesとCompost+Swar...

Linuxのアラーム機能の例の説明

Linuxアラーム機能の紹介上記のコード: #include <stdio.h> #in...

テーブルの幅を固定して、テキストによって幅が変わらないように設定

ページ内のテーブルの幅を width="600px" に設定した後も、幅が固定さ...

Redhat 8.0 システムのインストール方法に関するグラフィック チュートリアル (初心者には必須)

目次1. はじめに2. インストール01. 新しい仮想マシンを作成する02. システムをインストール...