CSS半圓形背景，是一種常見的UI設計元素。通過使用CSS的一些屬性和技巧，我們可以輕松地實現(xiàn)這種效果。

.example{
width: 200px;
height: 100px;
background-color: #ff0000;
border-top-right-radius: 100px;
border-top-left-radius: 100px;
position: relative;
}
.example:before{
content: "";
width: 0px;
height: 0px;
border: 50px solid transparent;
border-top: 50px solid #ff0000;
position: absolute;
top: -50px;
left: 0px;
}

該代碼實現(xiàn)了一個紅色背景的半橢圓形，其寬度為200px，高度為100px。我們使用了border-radius屬性的兩個屬性值，以此確定了左上角和右上角的圓角大小。此外，我們還使用了:before偽元素，給半圓形增加了上方的三角形。這樣利用圓角和三角形兩個元素的形狀，使得背景看起來像一個半圓形。

需要注意的是，我們使用了position:relative和position:absolute屬性。前者是為了為:before偽元素建立相對位置，;background-color是必須的，否則不會出現(xiàn)魔術；后者是為了為:before偽元素創(chuàng)建絕對位置，以便它可以定位到紅色矩形上方。

這是一個很簡單的CSS技術，但它可以為您的Web設計項目添加很大的價值。使用CSS半圓形背景，您可以輕松地定制您的頁面上的提示框、按鈕、標簽、導航等元素的樣式，使得頁面增加了更多的美觀性和趣味性。