CSS圓和環是網頁設計中常用到的效果，下面是一個簡單的CSS圓和環教程。

首先，我們要使用CSS來創建一個圓形的元素。我們可以使用border-radius屬性，來控制元素的圓角大小。比如：

.circle {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: red;
}

這個例子中，我們創建了一個寬高為100像素、紅色背景的圓形元素。通過border-radius: 50%屬性設置圓角大小，讓元素變成了圓形。

接下來，我們來看一下如何創建一個環形元素。我們可以使用偽元素before和after來實現。

.circle {
position: relative;
}
.circle::before {
content: "";
position: absolute;
top: -10px; 
left: -10px;
right: -10px; 
bottom: -10px; 
border-radius: 50%;
border: 10px solid red;
}

這個例子中，我們首先設置了.circle元素的position屬性為relative，這樣一來，.circle::before的position屬性就會相對于.circle元素的位置進行定位。我們使用偽元素before來創建一個和.circle元素大小相同的圓形元素，并將其設置為環形，通過設置border屬性來控制環內外圓環的大小。

通過這個簡單的教程，你已經學會了CSS圓和環的基本知識。你可以根據自己的需求，繼續探索更多的圓和環的效果。