CSS で円形 Div を簡単に作成するにはどうすればよいですか?

CSS での簡素化された円形 Div 作成

円形 div を作成する従来の方法では、さまざまなサイズの画像を生成することが多く、時間がかかり非効率的になる可能性があります。ただし、CSS には、より便利なソリューションが用意されています。

CSS を使用して循環 div を作成するには、次の手順を適用するだけです:

• CSS:

丸い境界線を持つすべての円形 div の基本クラスを定義します:

.circleBase {
    border-radius: 50%;
    behavior: url(PIE.htc); /* for IE8 support */
}

• HTML:

次を使用して HTML 要素を作成します。基本クラスを作成し、カスタム クラス内で必要なディメンションとスタイルを指定します。

<div class="circleBase type1"></div>

<div class="circleBase type2"></div>

<div class="circleBase type3"></div>

例:

次のサンプル コードとその出力について考えてみましょう。

.circleBase {
    border-radius: 50%;
    behavior: url(PIE.htc);
}

.type1 {
    width: 100px;
    height: 100px;
    background: yellow;
    border: 3px solid red;
}
.type2 {
    width: 50px;
    height: 50px;
    background: #ccc;
    border: 3px solid #000;
}
.type3 {
    width: 500px;
    height: 500px;
    background: aqua;
    border: 30px solid blue;
}

<div class="circleBase type1"></div>

<div class="circleBase type2"></div>
<div class="circleBase type2"></div>

<div class="circleBase type3"></div>

出力:

注: Internet Explorer 8 以下では、この手法が適切に動作するには CSS3 PIE が必要です。

以上がCSS で円形 Div を簡単に作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。