CSS3技術是Web前端技術的重要組成部分,它能夠讓我們實現更加豐富、靈活的網頁特效。其中,曲線是一種比較有趣的效果,這里介紹一下如何利用CSS3畫一個曲線。
.curve{ border-radius: 50%; background-color: #3498db; width: 300px; height: 150px; position: relative; } .curve::before, .curve::after{ content: ''; position: absolute; width: 10px; height: 100px; background-color: #fff; transform: rotate(45deg); } .curve::before{ top: 25px; left: -5px; } .curve::after{ top: 25px; right: -5px; }
以上是實現曲線效果的CSS3代碼,主要利用border-radius屬性設置元素為圓形,再利用偽元素before和after繪制兩個角度為45度的矩形,最后再通過position屬性對兩個矩形進行定位。