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 を使用して誤って削除されたデータベースを復元する方法

推薦する

MySQLは遅いSQLを開始し、原因を分析します

ステップ1. MySQLスロークエリを有効にする方法1: 設定ファイルを変更するWindows: W...

Nginx サービスを使用してサブドメイン環境を構築し、2D マップの読み込みパフォーマンスを向上させる方法を説明します。

1. 背景最近、友人が大規模なマップの読み込みが遅いという問題に遭遇しました。iServer のパ...

スライディングカルーセル効果を実現する js

この記事では、スライディングカルーセル効果を実現するためのjsの具体的なコードを参考までに共有します...

MySQL 検査スクリプト (必読)

以下のように表示されます。 #!/usr/bin/env python3.5 psutilをインポー...

知っておくべき 18 の Web ユーザビリティの原則

世界最高のビジュアル デザイン スキルを持っていたとしても、訪問者がページ間やアイテム間を快適に移...

Vueはカウンターのシンプルな生成を実装します

この記事では、Vueカウンターの簡単な実装コードを例として紹介します。具体的な内容は以下のとおりです...

Docker イメージ + nginx を使用して Vue プロジェクトをデプロイする方法

1. Vueプロジェクトのパッケージ化開発されたvueプロジェクトに次の名前を入力し、パッケージ化し...

WangEditor リッチ テキスト コンポーネントを Angular でカプセル化する方法

リッチ テキスト コンポーネントは、Web プログラムで、特にブログやフォーラムなどの Web サイ...

js を使用してウォーターフォール効果を実現する

この記事の例では、滝の流れの効果を実現するためのjsの具体的なコードを参考までに共有しています。具体...

DockerでEurekaを設定する方法

ユーレカ: 1. JDKイメージを構築するEurekaコンテナを起動するjdkフォルダと必要なファイ...

Docker が MySQL イメージをプルするのが遅すぎる問題を解決する

Docker を使用して MySQL イメージをプルしようとして 30 分経っても失敗したため、代わ...

フロントエンド開発に必要な共通ツール機能のまとめ

1. 時刻の書式設定とその他の方法moment.jsライブラリファイルの使用をお勧めします2. テン...

Linux で pyenv をインストールする方法

前提条件gitをインストールする必要があるインストール手順1. リモートリポジトリからpyenvをク...

HTML における li タグの水平配置の例

ほとんどのナビゲーション バーは、下の図に示すように水平に配置されていますが、これはどのように実現さ...

Vue Elementのテーブルコンポーネントをカプセル化する方法

Vue コンポーネントをカプセル化する場合でも、機能コンポーネントをクロスファンクショナルに使用しま...