CSS 是前端開發中不可缺少的技術，可以實現各種各樣的樣式效果。其中，上半橢圓是一種常見的效果之一。下面我們來介紹如何使用 CSS 來實現一個上半橢圓的效果。

.ellipse {
width:200px; height:100px;
background: #f60; border-radius: 100px/50px;
}

首先，我們創建一個 div 元素，并給它一個固定的寬度和高度。然后，我們通過設置 border-radius 屬性的值，來將正方形邊框變成橢圓形。其中， `/` 后面的 50px 表示縱向半徑的大小，而前面的 100px 表示橫向半徑的大小。這樣就可以創建一個橢圓形的元素了。

但是我們只需要實現一個上半橢圓，所以我們可以在上半部分添加一個白色的大圓，來遮蓋掉下半部分的橢圓，從而實現上半橢圓的效果。

.ellipse {
width:200px; height:100px;
background: #f60; border-radius: 100px/50px;
position: relative;
}
.ellipse::before {
content: ""; display: block;
width: 200px; height: 100px;
position: absolute; top: 0; left: 0;
background: #fff; border-radius: 100%;
}

在上述代碼中，我們使用了 ::before 偽元素，來創建一個寬度和高度與橢圓相同、背景為白色的大圓，它會覆蓋在橢圓的上半部分。通過設置 position 屬性，我們可以讓這兩個元素彼此疊加，從而實現上半橢圓的效果。

通過以上代碼，我們成功地實現了一個上半橢圓的效果。但是，隨著頁面的縮放，元素的橢圓形狀也會變形。這時候，我們可以使用 CSS3 中新出現的 aspect-ratio 屬性，來實現元素的寬高比例。

.ellipse {
aspect-ratio: 2/1; /* 代表寬高比為 2:1 */
background: #f60; border-radius: 100px/50px;
}

以上代碼中，我們直接使用了 aspect-ratio 屬性，并設置它的值為 2/1。這樣，元素就會被始終保持在寬高比為 2:1 的橢圓形狀中。

通過這些方法，我們可以輕松地實現各種各樣的 CSS 樣式效果，并為網頁增添更多的美觀性和互動性。