以前は、角を丸くするのは非常に面倒でしたが、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) 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 でのルーティング設定コマンド1. ホストルーティングを追加する ルートを追加 -host...
前提条件: Web開発者プラグインがインストールされている操作手順: [ツール] -> [We...
目次JavaScript オブジェクト1. 定義2. オブジェクトの分類3. オブジェクトを定義する...
テーブル作成コマンドには以下が必要です。 テーブルの名前フィールド名各フィールドを定義します(タイ...
この記事の例では、参考のためにVueカスタムポップアップ効果の具体的なコードを共有しています。具体的...
この記事では、Docker のマルチステージ ビルド機能を使用してイメージ サイズを大幅に削減する方...
目次序文実装のアイデア実装手順1. Nginxをコンパイルする2. 設定ファイルは以下のとおりです要...
目次問題の説明一般的な機能効果は次のとおりです。思考分析完全なコード要約する問題の説明Teambit...
MySQLの読み書き分離の落とし穴読み取りと書き込みの分離の主な目的は、メイン データベースの負荷を...
関連記事:初心者が学ぶ HTML タグ (3)導入された HTML タグは、必ずしも XHTML 仕...
目次01 Kubernetes とは何ですか? 02 KubernetesとCompost+Swar...
html <!DOCTYPE html> <html lang="ja&...
Linuxアラーム機能の紹介上記のコード: #include <stdio.h> #in...
ページ内のテーブルの幅を width="600px" に設定した後も、幅が固定さ...
目次1. はじめに2. インストール01. 新しい仮想マシンを作成する02. システムをインストール...