在現(xiàn)代的網(wǎng)頁設計中，扁平化設計風格已經(jīng)逐漸成為主流，以簡潔、干凈、直接的視覺效果為基礎。圖標作為扁平化設計中不可或缺的元素，它給頁面帶來了很多生動的元素，使得頁面具有更好的視覺體驗。但是，使用圖片大量的增加了頁面的加載時間，不利于網(wǎng)頁的快速加載。本文將介紹使用 CSS 畫橢圓扁平 icon 的方法，減小圖片對網(wǎng)頁載入的額外負擔。

.icon {
width: 60px;
height: 40px;
background: #00bcd4;
border-radius: 50% / 25%;
position: relative;
}
.icon::before, .icon::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 6px;
height: 6px;
background: #fff;
border-radius: 50%;
transform: translate(-50%, -50%);
}
.icon::before {
left: 10%;
}
.icon::after {
left: 20%;
}

上述代碼中，通過設置 width 和 height 來調整橢圓的大小，通過設置 background 和 border-radius 來設置橢圓的背景顏色和圓弧半徑。利用 CSS 3 的 border-radius 和框的斜角度來貼近橢圓的效果，并使用偽類 ":before" 和 ":after" 分別在橢圓的左側和右側增加兩個小的圓點。通過在兩個圓點上偏移 x 來調整圓點距離橢圓的間隔大小和位置及方向。

總體來說，使用 CSS 繪制橢圓扁平 icon 的方法比使用圖片的方法更加簡便，不僅減少了圖片對網(wǎng)頁加載的額外負擔，同時也提高了頁面的加載速度。這種方法可以大大提高頁面的性能，因此值得設計師進一步探索和應用。