CSS3 Concentric Circles

簡介

這篇介紹如何利用 CSS3 中 border-radius 及 box-shadow 的屬性繪製同心圓。只要瞭解了基本作法，可以加以變化，以逹到不同的效果。同心圓的繪製主要利用了幾個技巧，首先，利 border-radius: 50%; 的設定繪製圓形，再利用 CSS3 允許 box-shadow 元件同時可以定義數個值的特性（每個定義值以 "," 逗號分隔），逐一加上其它圓形，這個作法只能製作實心圓，不能製作空心圓。

作法有兩種，一種先定最內圓的大小，再一層一層往外加環形。這種作法要設定足夠的 margin 空間，讓外環圓有必要的空間，否則很容易侵入到週遭的元件。另一種作法是先設定同心圓的最大尺寸，由外往內縮，這種作法比較容易判斷同心圓所需要佔據的空間。

範例

範例中建立四個不同顏色的同心圓，中心的圓形直徑為 100px，其它三個外環則具有 20px 的寬度。中間的文字則置於同心圓的正中。這個範例是先設定內圓，由內往外擴充。

CSS

<style>
html {
    width: 100%;
    height: 100%;
    overflow: auto;
}
body {
    margin: 0 auto;
    width: 960px;
    padding: 20px;
}
.circle {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 60px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: red;
    box-shadow: 0px 0px 0px 20px coral,
        0px 0px 0px 40px lightgreen,
        0px 0px 0px 60px skyblue;
}
</style>

.circle{} 設定了同心圓的尺寸和外觀。第 13~15 行利用 flex box 的設定讓圓中的文字置於正中央。margin 至少需設定為 60px，讓外環有足夠的空間擴充，background-color 則是最內圓的顏色。box-shadow 則設定了外面三環的顏色及寬度，注意，環的寬度必須累加。

HTML

<body>
    Bull's eye
</body>

HTML 的設定很簡單，就建立一個 <div> 即可。

範例

範例中建立四個不同顏色的同心圓，最外的圓形直徑為 220px，其它三個內環則具有 20px 的寬度，中間的文字置於同心圓的正中。這個範例是先設定外圓的尺寸，由外往內縮。要注意的是在 box-shadow 的設定中，各環顏色的設定次序並沒有改變，但在顯示時各環的顏的次序和上一個範例卻是相反的。

CSS

<style>
html {
    width: 100%;
    height: 100%;
    overflow: auto;
}
body {
    margin: 0 auto;
    width: 960px;
    padding: 20px;
}
.circle {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background-color: red;
    box-shadow: 0px 0px 0px 20px coral inset,
        0px 0px 0px 40px lightgreen inset,
        0px 0px 0px 60px skyblue inset;
}
</style>

.circle{} 設定了同心圓的尺寸和外觀。第 13~15 行利用 flex box 的設定讓圓中的文字置於正中央。margin 沒有設定，因為 box-shadow 會出現在元件的內部，設定時就是元件正常的 margin。background-color 則是最內圓的顏色。box-shadow 則設定了內三環的顏色及寬度，注意環的寬度必須累加，inset 設定會讓 box-shadow 出現在元件的內部，而非外圍。

HTML

<body class="claro">
    Bull's eye
</body>

HTML 的設定很簡單，就建立一個 <div> 即可。

熊伯的外接硬碟

2016年5月17日星期二