圓環是一種經常在web設計中使用的裝飾性形狀。在CSS3中，我們可以利用border-radius和transform屬性來輕松地創建漂亮的圓環。

.circle {
width: 200px;
height: 200px;
border: 10px solid #ebebeb;
border-radius: 50%;
box-sizing: border-box;
transform: rotate(45deg);
}

上面的代碼中，我們定義了一個名為“circle”的類，它將被應用于一個寬和高都為200像素的正方形元素。我們利用border-radius屬性將該元素轉換為一個完美的圓形。然后，我們設置border屬性來創建有厚度的邊界，這里的顏色為#ebebeb。

為了讓圓環不垂直于頁面，我們使用transform屬性將其旋轉了45度。這使得該圓環看起來更加動態和有趣。

如果想要在圓環內部添加內容，我們可以使用偽元素:before和:after來實現。我們也可以使用background屬性來添加背景顏色或圖片。

.circle {
position: relative;
width: 200px;
height: 200px;
border: 10px solid #ebebeb;
border-radius: 50%;
box-sizing: border-box;
transform: rotate(45deg);
}
.circle:before {
content: "";
position: absolute;
top: -5px;
left: -5px;
width: 100%;
height: 100%;
border: 5px solid #ebebeb;
border-radius: 50%;
}
.circle:after {
content: "Text";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 24px;
}

以上代碼中，我們定義了一個在圓環內部添加一個白色的圓環，以及一段居中的文本（“Text”），并且將它們相對于圓環進行絕對定位。使用偽元素:before和:after時需要將容器元素的position設為relative。

如此，我們可以輕松地創建一個漂亮的圓環，并通過使用偽元素來在其內部添加內容。