CSSで正方形を円に変える方法

正方形を円に変える Css メソッド: [border-radius:150px] などの border-radius 属性を使用できます。 border-radius プロパティを使用すると、要素に丸い境界線を追加できます。

このチュートリアルの動作環境: Windows 10 システム、CSS3、この記事はすべてのブランドのコンピューターに適用されます。

属性の紹介:

border-radius 属性は、最大 4 つの border -*- radius 属性を指定できる複合属性です。この属性を使用すると、丸い境界線を追加できます。要素。

(学習ビデオ共有: css ビデオ チュートリアル)

文法:

border-radius: 1-4 length|% / 1-4 length|%;

コード実装:

新しい HTML ファイルを作成する, 図に示すように、body タグに div タグを入力し、div タグにクラス名 (ボックス) を追加します。

クラスに CSS 属性を追加します。名前 (ボックス)、図に示すように正方形にします。

#CSS 属性を追加します。コード: border- radius:150px、例: 図に示すように:

Web ページを実行すると、図に示すように、正方形が円に変わっていることがわかります。画像:

関連する推奨事項: CSS チュートリアル

以上がCSSで正方形を円に変える方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。