CSS3可以使用border-radius屬性創(chuàng)建環(huán)形比例效果。這個屬性讓我們能夠指定一個元素的圓角邊框半徑。當我們把這個邊框設(shè)置成一個很大的值時，它就會看起來像是一個完整的圓。

.circle {
width: 200px;
height: 200px;
border-radius: 50%; /* 將border-radius設(shè)置為50%時，就可以創(chuàng)建一個圓形 */
background-color: #f00;
}

要創(chuàng)建一個環(huán)形比例，我們可以在元素的偽類中使用較小的border-radius值，從而使內(nèi)部的區(qū)域看起來更小。

.circle {
width: 200px;
height: 200px;
border-radius: 50%;
background-color: #f00;
position: relative;
}
.circle::after {
content: '';
display: block;
position: absolute;
top: 10%;
left: 10%;
width: 80%;
height: 80%;
border-radius: 40%; /* 將border-radius設(shè)置為40%時，就可以創(chuàng)建一個內(nèi)圓 */
background-color: #fff;
}

在上面的代碼中，我們使用了::after偽類來創(chuàng)建一個內(nèi)圓。我們通過設(shè)置其寬度和高度來控制內(nèi)環(huán)的大小，使用position屬性將其定位在環(huán)形比例的中心，使用border-radius屬性創(chuàng)建一個較小的圓角邊框，使其看起來像是在環(huán)形比例的內(nèi)部。