如何在 CSS 中輕鬆建立圓形 Div？

CSS 中簡化的圓形 Div 創建

創建圓形 div 的傳統方法通常涉及生成不同尺寸的圖像，這可能既耗時又低效。然而，CSS 提供了更方便的解決方案。

要使用CSS 建立圓形div，只需執行以下步驟：

• CSS:

為所有帶有圓角的圓形div定義一個基底類別border:

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

• HTML:

使用基底類別建立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中文網其他相關文章！