ホームページ > 記事 > ウェブフロントエンド > CSS がさまざまな形状を実装する方法
CSS でさまざまな形状を実装する方法: 1. 円の場合、CSS を設定するときに幅と高さを同じに設定し、[border-radius] 属性を幅または高さの半分に設定します。2 . 正方形は CSS グラフィックです。 の最も単純なグラフィックの 1 つであり、div を使用して ID を設定します。
このチュートリアルの動作環境: Windows7 システム、css3 バージョン、DELL G3 コンピューター。
CSS でさまざまな形状を実現する方法:
1. 円
CSS を使用して円を作成するには、 ID が設定された div が必要です。
<div id="circle"></div>
CSS を円に設定する場合は、幅と高さを等しく設定し、次に border-radius 属性を幅または高さの半分に設定します。
#circle { width: 120px; height: 120px; background: #7fee1d; -moz-border-radius: 60px; -webkit-border-radius: 60px; border-radius: 60px; }
2 . Square
正方形は CSS グラフィックの中で最も単純なグラフィックの 1 つであり、div を使用し、ID を設定します。
<div id="square"></div>
正方形の CSS スタイルは、同じ幅と高さに設定するだけで済みます。
#square { width: 120px; height: 120px; background: #f447ff; }
推奨関連チュートリアル: CSS ビデオ チュートリアル
以上がCSS がさまざまな形状を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。