CSS是前端開發中不可或缺的一部分，通過它可以實現很多有趣、有用的效果。其中，長方形兩邊變圓是一種常見效果，下面我們來看一下如何實現。

//設置長方形的寬高和邊框顏色
.rectangle {
width: 200px;
height: 100px;
border: 1px solid #f00; 
margin: 50px;
display: inline-block;
}
//設置左右兩個圓角
.rectangle::before,
.rectangle::after {
content: "";
display: block;
width: 20px;
height: 20px;
border-radius: 10px;
position: absolute;
top: -10px;
z-index: -1;
background: #f00;
}
//左圓角位置
.rectangle::before {
left: -10px;
}
//右圓角位置
.rectangle::after {
right: -10px;
}

首先，在HTML中創建一個長方形的div，并為其添加一個類名“rectangle”，再為其設置width、height、border等基本屬性以及margin，使其呈現長方形的形狀和具有顏色區分上下邊框的效果。

接著，在CSS中，利用偽元素before和after來分別為長方形的左右兩邊添加圓角。設置content屬性為空字符串，將它們設為塊級元素并設置寬高。通過border-radius屬性設置圓角的半徑，并將它們的位置設為絕對定位，在長方形的上方，使之覆蓋在長方形的邊框上方。

左圓角的位置通過left屬性設置為-10px，右圓角的位置通過right屬性設置為-10px，使之剛好覆蓋邊框處。最后，為了避免偽元素遮擋長方形，將它們的z-index屬性設置為-1。這樣，就完成了長方形兩邊變圓的效果。