CSS是前端開發(fā)中不可或缺的一部分，通過(guò)它我們可以實(shí)現(xiàn)網(wǎng)頁(yè)的各種各樣的樣式，包括上面圓角下面直角的樣式。

.box{
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}

使用border-radius屬性可以實(shí)現(xiàn)實(shí)現(xiàn)圓角的效果，其中border-top-left-radius可以用來(lái)設(shè)置左上角圓角的大小，border-top-right-radius可以用來(lái)設(shè)置右上角圓角的大小，border-bottom-left-radius可以用來(lái)設(shè)置左下角圓角的大小，border-bottom-right-radius可以用來(lái)設(shè)置右下角圓角的大小。當(dāng)我們只想要上面兩個(gè)角是圓角時(shí)，可以將下面兩個(gè)角的圓角大小設(shè)置為0，即可實(shí)現(xiàn)上面圓角下面直角的效果。

.box{
border-radius: 10px 10px 0 0;
}

上面的代碼是上面圓角下面直角的另一種實(shí)現(xiàn)方式，它簡(jiǎn)化了代碼的書寫，可以使用一個(gè)屬性border-radius來(lái)設(shè)置圓角的大小。其中10px 10px 0 0表示從左上角開始，分別是左上角、右上角、右下角、左下角，而0則表示不設(shè)置圓角。

無(wú)論是通過(guò)border-radius屬性還是通過(guò)border-radius縮寫屬性，都可以實(shí)現(xiàn)上面圓角下面直角的效果，開發(fā)者可以根據(jù)自己的習(xí)慣和實(shí)際需求來(lái)選擇不同的方式。