CSS是前端開發中不可或缺的一部分，通過它我們可以實現網頁的各種各樣的樣式，包括上面圓角下面直角的樣式。

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

使用border-radius屬性可以實現實現圓角的效果，其中border-top-left-radius可以用來設置左上角圓角的大小，border-top-right-radius可以用來設置右上角圓角的大小，border-bottom-left-radius可以用來設置左下角圓角的大小，border-bottom-right-radius可以用來設置右下角圓角的大小。當我們只想要上面兩個角是圓角時，可以將下面兩個角的圓角大小設置為0，即可實現上面圓角下面直角的效果。

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

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

無論是通過border-radius屬性還是通過border-radius縮寫屬性，都可以實現上面圓角下面直角的效果，開發者可以根據自己的習慣和實際需求來選擇不同的方式。