CSS曲線可以讓網頁更加美觀，讓我們的設計更具吸引力。那么，CSS曲線是怎么寫出來的呢？
.curve {
width: 300px;
height: 150px;
background-color: #f5f5f5;
position: relative;
}
.curve:before,
.curve:after {
content: '';
position: absolute;
left: 0;
background-color: #f5f5f5;
}
.curve:before {
height: 50%;
width: 100%;
border-radius: 100% 100% 0 0;
transform-origin: center bottom;
transform: scaleX(2);
}
.curve:after {
height: 100%;
width: 100%;
top: 50%;
border-radius: 0 0 100% 100%;
transform-origin: center top;
transform: scaleX(2);
}上述代碼可以創建一個簡單的CSS曲線。首先，我們創建一個
元素，設置它的寬度和高度。接著，我們通過:before和:after偽元素分別創建曲線的上半部分和下半部分，并設置它們的位置、大小、顏色、邊框半徑等等屬性。最后，我們通過transform屬性來實現曲線的拉伸效果，讓它看起來更加真實。
在CSS中，曲線的實現方式還有很多種，如使用SVG、Canvas等等。我們要根據實際情況選擇最適合的方式來實現我們想要的效果。
下一篇css普通文檔流