要素に丸い境界線を追加する 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のウェブページスクリーンショット機能の詳しい説明
推薦する
MySQL でコマンドを使用して階層検索を実現する方法の詳細な説明
序文この記事は主にMySQLコマンド階層検索ヘルプの使用に関する内容を紹介します。この記事のサンプル...
MySQL MGR の利点は何ですか?
MGR (MySQL グループ レプリケーション) は、バージョン 5.7 で追加された新しい機能...
Apache Spark 2.0ジョブは完了するまでに長い時間がかかります
現象Apache Spark 2.x を使用すると、Spark ジョブがすべて完了しているにもかかわ...
Linuxでブーストライブラリをインストールするための完全な手順
序文Boost ライブラリは、標準ライブラリのバックアップとして機能し、C++ 標準化プロセスの開発...
トークンの有効期限が切れたときにページを更新するときに繰り返しプロンプトが表示されないようにする Vue について
トークンの有効期限が切れたら、ページを更新します。ページの読み込み時にバックエンドに複数のリクエスト...
Mysql の主キーと一意キーの違いのまとめ
主キーとは何ですか?主キーは、テーブル内の各タプル (行) を一意に識別するテーブル内の列です。主キ...
加算、減算、乗算、除算の機能を実現するには、HTML に 2 つの数値を入力します。
1. parseFloat() 関数Web ページ上に簡単な計算機を作成し、テキスト ボックスに ...
Nginx 仮想ホストを構成する 3 つの方法 (ポートベース) の詳細な説明
Nginx は、IP ベースの仮想ホスト構成、ポート ベースの仮想ホスト構成、ドメイン名ベースの仮想...
標準のMySQL (x64) Windowsバージョンのインストール手順の詳細な説明
MySQL x64 はインストーラーを提供していません、インストーラーを提供していません、インストー...
mysqlを使用して、URLから返されたhttp GETリクエストデータを記録します。
ビジネスシナリオの要件と実装ロジックの分析ビジネスでは、HTTP GET を使用してデータを要求する...
一般的な MySQL ストレージ エンジンとパラメータ設定およびチューニングの紹介
MyISAM、MySQLでよく使われるストレージエンジン特性： 1. 同時実行性とロックレベル2. ...
MySQL インデックスの失敗を引き起こす一般的な書き込み方法の概要
序文最近、古いプロジェクトから残ったいくつかの SQL 最適化の問題に対処するのに忙しくしています。...
HTML で入力プロンプトのテキスト スタイルを変更するためのサンプル コード
多くのウェブサイトでは、入力ボックスにヒントテキストが表示されています。入力ボックスにヒントテキスト...
Dockerディスク容量不足の問題を解決する
Docker が配置されているサーバーをしばらく稼働させたところ、サーバーのディスク ディレクトリの...
HTML_PowerNode Java アカデミーでテーブルを動的に追加する
さっそく、コードを直接投稿します。具体的なコードは次のとおりです。 <html> <...