CSS3是一種用于網頁設計與排版的標準，它為我們提供了豐富的樣式效果，其中之一就是制作圓形。接下來，我們將通過pre標簽來展示CSS3制作圓形的代碼。

.round {
width: 100px;  /* 圓形寬度 */
height: 100px;  /* 圓形高度 */
border-radius: 50%;  /* 圓形半徑 */
background-color: #f00;  /* 圓形背景色 */
}

上述代碼中，我們通過設置border-radius屬性的值為50%，將原本的矩形轉換為圓形。同時，我們還設置了圓形的寬度、高度和背景色。

除了使用固定的寬度和高度來制作圓形，我們還可以使用響應式設計來制作自適應的圓形。下面是pre標簽展示的代碼。

.responsive-round {
width: 100%;  /* 圓形寬度為父級容器的100% */
padding-top: 100%;  /* 設置圓形高度為寬度的100% */
position: relative;  /* 相對定位 */
border-radius: 50%;  /* 圓形半徑 */
background-color: #0f0;  /* 圓形背景色 */
}
.responsive-round::before {
content: "";  /* 前置內容為空 */
display: block;  /* 塊級元素 */
padding-bottom: 100%;  /* 設置寬度為高度的100% */
}
.responsive-round-inner {
position: absolute;  /* 絕對定位 */
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 50%;  /* 圓形半徑 */
background-color: #00f;  /* 圓形背景色 */
}

上述代碼中，我們使用相對定位和絕對定位實現了自適應圓形。通過設置padding-top和padding-bottom的值為圓形寬度的百分比，可以保證寬度和高度一致，從而實現圓形效果。同時，我們還添加了before偽元素，用于解決設置padding-top的內容尺寸為0的問題。

通過上述代碼，我們可以輕松地制作出漂亮的圓形效果，為網頁設計增添更多的美感。