標題：CSS控制div為圓形

在網頁中，我們通常需要使用div容器來控制頁面的內容布局。但是，有時候我們需要將div容器設置為圓形，以模擬一些特殊的效果，如圓形按鈕、圓形菜單等。這時，我們可以使用CSS的`border-radius`屬性來控制div容器的圓形。

1. 在HTML中添加一個div容器，并使用CSS設置其屬性。

```html

<div class="circle"></div>

2. 添加CSS代碼，設置div容器的屬性。

```css

.circle {

width: 200px;

height: 200px;

border-radius: 50%;

background-color: #fff;

position: relative;

.circle:before,

.circle:after {

content: "";

position: absolute;

top: 0;

left: 50%;

width: 0;

height: 0;

border-radius: 50%;

background-color: #007bff;

transition: all 0.3s ease;

.circle:before {

left: 0;

transform: rotate(-45deg);

.circle:after {

left: 50%;

transform: rotate(45deg);

上述代碼中，我們使用`border-radius`屬性將div容器設置為圓形，并通過`:before`和`:after`偽元素進行定位和旋轉。通過CSS的動畫效果，我們可以模擬出一個圓形的效果。

當我們將div容器設置為圓形時，可以看到輸出的效果是一個圓形。可以通過瀏覽器的調試工具查看效果。

通過使用CSS的`border-radius`屬性，我們可以控制div容器為圓形，從而實現一些特殊的效果。在使用CSS進行布局時，我們可以靈活地控制div容器的形狀，以達到我們想要的效果。