CSS是網頁設計中一個非常重要的部分，它可以控制網頁的樣式和布局。在過去的幾十年中，微軟公司的標志已經成為了世界著名品牌之一，現在我們來學習一下如何使用CSS來畫出微軟公司的標志。

.ms-logo {
width: 200px;
height: 200px;
background-color: #f65314;
border-radius: 50%;
position: relative;
}
.ms-logo:before {
content: "";
width: 100px;
height: 100px;
background-color: #fff;
position: absolute;
top: 20%;
left: 20%;
border-radius: 50%;
}
.ms-logo:after {
content: "";
width: 60px;
height: 60px;
background-color: #f65314;
position: absolute;
top: 36%;
left: 36%;
border-radius: 50%;
}

首先，我們給微軟的標志設置了一個寬度和高度為200px的圓形容器，并將背景顏色設置為微軟標志的經典紅色（#f65314）。我們使用了border-radius屬性將容器變成了一個圓形。

接下來，我們使用:before和:after偽元素來添加白色和紅色的圓形。偽元素是CSS3中引入的非常有用的元素，它可以創建并插入不存在于HTML代碼中的元素，我們可以利用它來實現微軟標志中的小圓點。偽元素可以方便地通過content屬性添加內容，然后使用絕對定位（position:absolute）來在指定位置添加元素。

我們使用border-radius屬性將:before和:after元素設置為圓形，并使用top和left屬性將它們放置在所需的位置。最終，我們得到了一個精美的微軟標志，它只用了幾行簡單的CSS代碼就畫出來了。