CSS曲線可以讓網(wǎng)頁看起來更加動態(tài)，如果再在曲線上加上一些小圖標(biāo)，就可以讓網(wǎng)頁更加生動有趣。以下是代碼實現(xiàn)：

.curve {
position: relative;
width: 100%;
height: 200px;
background-color: #FFFFFF;
}
.curve:before {
content: "";
position: absolute;
top: -50px;
width: 100%;
height: 300px;
background: linear-gradient(to bottom right, #FF0000 0%, #0000FF 100%);
border-radius: 50% 50% 0 0;
}
.curve:after {
content: "";
position: absolute;
top: -40px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 80px;
background-color: #FFFFFF;
border-radius: 50%;
border: 2px solid #000000;
}
.curve img {
position: absolute;
top: -30px;
left: 50%;
transform: translateX(-50%);
width: 50px;
height: 50px;
}

這里設(shè)置了一個類名為curve的div容器，里面加了一個偽元素before，可以實現(xiàn)紅到藍(lán)的漸變色曲線；再加一個偽元素after，可以實現(xiàn)一個白色圓形；最后在curve中加入img標(biāo)簽，可以實現(xiàn)在曲線上加上一張圖片。