ホームページ > 記事 > ウェブフロントエンド > CSSでdivを円に変更する方法
CSSでdivを円に変更する方法
- 藏色散人オリジナル
- 2020-12-30 09:23:583901ブラウズ
div を円に変更する Css メソッド: 最初に新しい HTML ファイルを作成し、次に body タグに「1331fce85752e1268a1f748c03848cfe16b28748ea4df4d9c2150843fecfba68」を入力し、最後に head に「1331fce85752e1268a1f748c03848cfe16b28748ea4df4d9c2150843fecfba68」を入力します。 table styleタグを追加し、「border-radius」属性を追加します。
このチュートリアルの動作環境: Dell G3 コンピューター、Windows 7 システム、HTML5&&CSS3 バージョン。
推奨: 「css ビデオ チュートリアル 」
css は div を円に変更します
1. コード エディターを開きます。新しい HTML ファイルを作成し、基本構造
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>2 を記述します。本文タグに「1331fce85752e1268a1f748c03848cfe16b28748ea4df4d9c2150843fecfba68」と入力します。ここでの div は、円を描画するために使用されます。のタグ。 (推奨学習: CSS ビデオ チュートリアル)
<body>
<div class="circle"></div>
</body>3. スタイル タグを head テーブルに追加し、次のコードを入力します
<style>
.circle{
width: 200px;
height: 200px;
border-radius: 100px;
background-color: #1EFD0C;
}
</style>5. コードを保存し、ブラウザを開いて円を表示します。 。
実装原則: 幅と高さを同じに設定し、角の丸い部分を幅と高さの半分に設定します。より便利な方法は、角の丸い部分を直接 50% に設定することです。
以上がCSSでdivを円に変更する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。