以前は、角を丸くするのは非常に面倒でしたが、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 を使用して誤って削除されたデータベースを復元する方法
ステップ1. MySQLスロークエリを有効にする方法1: 設定ファイルを変更するWindows: W...
1. 背景最近、友人が大規模なマップの読み込みが遅いという問題に遭遇しました。iServer のパ...
この記事では、スライディングカルーセル効果を実現するためのjsの具体的なコードを参考までに共有します...
以下のように表示されます。 #!/usr/bin/env python3.5 psutilをインポー...
世界最高のビジュアル デザイン スキルを持っていたとしても、訪問者がページ間やアイテム間を快適に移...
この記事では、Vueカウンターの簡単な実装コードを例として紹介します。具体的な内容は以下のとおりです...
1. Vueプロジェクトのパッケージ化開発されたvueプロジェクトに次の名前を入力し、パッケージ化し...
リッチ テキスト コンポーネントは、Web プログラムで、特にブログやフォーラムなどの Web サイ...
この記事の例では、滝の流れの効果を実現するためのjsの具体的なコードを参考までに共有しています。具体...
ユーレカ: 1. JDKイメージを構築するEurekaコンテナを起動するjdkフォルダと必要なファイ...
Docker を使用して MySQL イメージをプルしようとして 30 分経っても失敗したため、代わ...
1. 時刻の書式設定とその他の方法moment.jsライブラリファイルの使用をお勧めします2. テン...
前提条件gitをインストールする必要があるインストール手順1. リモートリポジトリからpyenvをク...
ほとんどのナビゲーション バーは、下の図に示すように水平に配置されていますが、これはどのように実現さ...
Vue コンポーネントをカプセル化する場合でも、機能コンポーネントをクロスファンクショナルに使用しま...