div を円に変更する Css メソッド: 最初に新しい HTML ファイルを作成し、次に body タグに「
」を入力し、最後に head に「」を入力します。 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 を記述します。本文タグに「
」と入力します。ここでの 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 サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
