在CSS中，我們經(jīng)常需要用到各種形狀的樣式，其中四分之一圓也是常見的一種。下面來介紹一下如何用CSS實現(xiàn)四分之一圓樣式。

/* 父元素設(shè)置寬高 */
.parent {
width: 100px;
height: 100px;
background-color: #ccc;
/* 使圓角生效 */
border-radius: 50%;
overflow: hidden;
}
/* 子元素設(shè)置圓角 */
.child {
width: 200px;
height: 200px;
background-color: #fff;
/* 設(shè)置右上角為圓角 */
border-top-right-radius: 100px;
/* 隱藏左半邊 */
transform: translateX(-100px);
}

以上代碼中，首先我們需要先創(chuàng)建一個父元素和一個子元素。讓父元素設(shè)置寬高和圓角樣式，同時給父元素設(shè)置overflow:hidden屬性，以隱藏子元素的左半邊。然后，對子元素進(jìn)行樣式設(shè)置，將它的寬高設(shè)置為父元素寬高的兩倍，并將左半邊隱藏，右上角設(shè)置為圓角即可。

通過以上的設(shè)置，我們便可以實現(xiàn)四分之一圓的樣式效果了。需要注意的是，實現(xiàn)四分之一圓的關(guān)鍵是將一個正方形的元素做出圓形樣式，并隱藏掉左半邊。