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 サイトの他の関連記事を参照してください。