CSS是網(wǎng)頁(yè)設(shè)計(jì)中一個(gè)非常重要的部分，它可以控制網(wǎng)頁(yè)的樣式和布局。在過去的幾十年中，微軟公司的標(biāo)志已經(jīng)成為了世界著名品牌之一，現(xiàn)在我們來學(xué)習(xí)一下如何使用CSS來畫出微軟公司的標(biāo)志。

.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%;
}

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

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

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