要素に丸い境界線を追加する 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 5.7.25 圧縮版のインストールと設定方法のグラフィックチュートリアル
この記事では、MySQL 5.7.25圧縮版のインストールと設定方法を参考までに紹介します。具体的な...
HTML+CSS マージテーブル境界線サンプルコード
table タグと td タグに境界線を追加すると、デフォルトでは次のように二重境界線が使用されます...
MySQLトリガーの詳細な説明と簡単な例
MySQLトリガーの簡単な例文法CREATE TRIGGER <トリガー名> -- トリ...
関連するプロパティのリストを含む HTML エリア イメージ ホットスポットの使用の概要
<area> タグは主にイメージマップで使用されます。イメージマップにアクティブ領域 (...
MySQL ベースのストレージエンジンとログの説明 (包括的な説明)
1.1 ストレージエンジンの概要 1.1.1 ファイルシステムストレージファイル システム: オペ...
HTML の div と span の違い (共通点と相違点)
共通点: DIV タグと SPAN タグは、コンテンツ全体を非表示にしたり、コンテンツ全体を移動した...
CSS3 を使用して楕円軌道の回転を実装するサンプルコード
最近、次のような効果を達成する必要がある最初は、CSS3D回転を使用して記述すると、次の効果しか得ら...
一般的なMysql DDL操作の概要
図書館管理ライブラリを作成する データベースを作成します [存在しない場合] ライブラリ名;ライブラ...
Zabbix パスワードをリセットする方法 (ワンステップ)
問題の説明長い間アカウントパスワードを入力して Zabbix にログインしていないため、管理者パスワ...
Mac MySQL のルートパスワードをリセットするチュートリアル
免責事項：このパスワード リセット方法は、Homebrew によってインストールされた MySQL ...
MySQLデータベースの増分バックアップのアイデアと方法
MySQL データベースの増分バックアップを実行するには、データベース構成ファイル /etc/my....
MySQL の制限パフォーマンス分析と最適化
1. 結論構文: 制限オフセット、行結論: 同じ行条件では、オフセット値が大きいほど、limitステ...
TypeScript インターフェースの紹介
目次1. インターフェース定義2. 属性2.1 オプション属性2.2 読み取り専用プロパティ3. ク...
IISMonitor を使用して Web ページを監視し、IIS を自動的に再起動します。
目次1. ツールの紹介2. ワークフロー3. 操作インターフェースとパラメータ設定（１）監視と再起動...
MySQL バージョン 5.7.24 のデータベース インストール プロセスの詳細なグラフィック説明
MySQL は最も人気のあるリレーショナル データベース管理システムです。WEB アプリケーションに...