如何使用CSS圓只顯示一半？這種效果很常見，可以讓頁面看起來更加美觀。事實(shí)上，這種效果非常簡(jiǎn)單。只需要使用CSS3的border-radius和overflow屬性就可以輕松實(shí)現(xiàn)。

/* 定義一個(gè)長寬相等的div，并設(shè)置圓角 */
div {
width: 100px;
height: 100px;
border-radius: 50px;
overflow: hidden;
}
/* 設(shè)置背景顏色和位置 */
div:first-child {
background-color: #ffa500;
float: left;
}
div:last-child {
background-color: #4169e1;
float: right;
}

首先，需要定義一個(gè)長寬相等的div，并設(shè)置圓角。為了只顯示一半，需要用到overflow屬性。通過設(shè)置為hidden，可以隱藏超出div的內(nèi)容。接著，通過設(shè)置背景顏色和位置，可以讓兩個(gè)半圓顯示不同的顏色。

需要注意的是，當(dāng)分割線處于瀏覽器的右側(cè)時(shí)，右邊的半圓可能會(huì)被截?cái)唷＿@時(shí)候，可以通過繼續(xù)使用border-radius屬性來解決。例如，在右邊的div中設(shè)置border-top-right-radius和border-bottom-right-radius，就可以確保半圓完整顯示。

總的來說，只需要幾行CSS代碼就可以實(shí)現(xiàn)圓只顯示一半的效果。如果您需要在網(wǎng)頁上實(shí)現(xiàn)這個(gè)效果，不妨試試以上代碼。