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

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

要創建一個環形比例，我們可以在元素的偽類中使用較小的border-radius值，從而使內部的區域看起來更小。

.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設置為40%時，就可以創建一個內圓 */
background-color: #fff;
}

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