要素に丸い境界線を追加する border-radius メソッド
|
border-radius:10px; /* すべての角は半径 10px で丸められます*/
border-radius: 5px 4px 3px 2px; /* 4つの半径値は、時計回りに左上隅、右上隅、右下隅、左下隅です*/
border-radius の値は px 単位でしか表現できないと考えないでください。パーセンテージや em も使用できますが、現時点では互換性はあまり良くありません。 上部の実線半円: 方法: 高さを幅の半分に設定し、左上隅と右上隅の半径のみを要素の高さに合わせて設定します (これより大きくてもかまいません)。
div{
height:50px;/*幅の半分*/
幅:100ピクセル;
背景:#9da;
border-radius:50px 50px 0 0;/*半径は少なくとも高さの値である必要があります*/
}
塗りつぶされた円: 方法: 幅と高さの値が一定(つまり正方形)になるように設定し、4 つの角の半径の値をその半分の値に設定します。 次のコード:
div{
height:100px;/*幅の設定と同じ*/
幅:100ピクセル;
背景:#9da;
border-radius:50px;/*4つの角の半径の値はすべて幅または高さの値の半分に設定されます*/
}完全なコード
<!doctypehtml>
<html>
<ヘッド>
<メタ文字セット="utf-8">
<title>境界線の半径</www.dztcsd.com/title>
<スタイル タイプ="text/css">
div.circle{
height:100px;/*幅の設定と同じ*/
幅:100ピクセル;
背景:#9da;
border-radius:50px;/*4つの角の半径の値はすべて幅または高さの値の半分に設定されます*/
}
/*タスク部分*/
div.半円{
高さ:100px;
幅:50px;
背景:#9da;
境界線の半径:?;
}
</スタイル>
</head>
<本文>
<div class="circle">
</div>
<br/>
<!--タスクセクション-->
<div class="semi-circle">
</div>
</本文>
</html>要素に丸い境界線を追加する border-radius メソッドに関するこの記事はこれで終わりです。border-radius 丸い境界線に関するその他の関連コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 |
<<: Linux クラウド サーバー上に SFTP サーバーとイメージ サーバーを構築する方法
>>: Vueのウェブページスクリーンショット機能の詳しい説明
推薦する
docker で mysql に接続できない場合の解決策
シナリオ: 仮想マシンの Docker コンテナに最新バージョンの MySQL をインストールした後...
Linux でのマルチスレッドにおけるフォークの紹介
目次質問：ケース（１）子スレッドを作成する前にフォークするケース（２）子スレッドを作成した後にフォー...
Docker Docker の保存場所を変更する コンテナイメージのサイズ制限を変更する操作
これは新しいバージョンではもう不可能なようで、推奨されません。そうでない場合は、ソフト リンクを直接...
MySql 学習 3 日目: データ テーブル間の接続とクエリの詳細
主キー:キーワード: 主キー機能: null にすることはできず、一意である必要があります。主キーの...
一般的な docker コマンドの概要 (推奨)
1. 要約:一般的に、次のカテゴリに分類できます。 Docker 環境情報 — docker [i...
Linux で誤って削除したメッセージ ファイルを復元する方法
プロセスで使用されていて、誤って削除されたファイルがある場合、それらを回復することができます。プロセ...
TypeScript を使用して Vue3 で axios をカプセル化する詳細な例
この axios パッケージは、vue3 デモで使用されます。便宜上、element-plus は ...
Centos6.5 で MySQL 5.7.19 をインストールして設定する方法
Centos6.5にmysql5.7.19をインストールするための詳細な手順は次のとおりです。 1....
Linuxでバージョン情報を表示する方法
Linux でバージョン情報を表示する方法。ビット数、バージョン情報、CPU コア情報、CPU 固有...
CSS 要素で計算されたスタイルを取得します (カスケード/最終スタイル後)
CSS 要素内の計算されたスタイル (つまり、カスケード後の最終的なスタイル) を取得するには、W3...
チェックボックスの選択またはキャンセルを実装するJavaScript
この記事では、すべてのチェックボックスを選択または解除するためのJavaScriptの具体的なコード...
HTML でファイルをアップロードするときに使用する <input type="file"> 要素のスタイルをカスタマイズします。
Web ページでは、基本的に <input type="file">...
複数の .sql ファイルを MySQL に効率的にインポートする方法の詳細な説明
MySQL には、複数の .sql ファイル (SQL ステートメントを含む) をインポートする方法...
MacOS で Docker を使用して MySQL マスター スレーブ データベースを作成する方法
1. MySQLイメージを取得するターミナルから最新のMySQLイメージを取得するdocker pu...
W3C組織はHTML4のスタイルに関する推奨事項を提供しています
これは、W3C 組織が HTML4 に対して提示したスタイル推奨事項です。残念ながら、ブラウザが独自...