在實現頁面五花八門的有特色的ui時，我們有時會遇到要用實現一個弧形，而這樣的弧形要怎么實現呢？用圖片？好像不大現實，因為這樣就要無故多加載一張圖片了，這里我們來說說怎么用css的after偽類來實現弧形。

先是一寫元素，再給這個元素設置樣式和偽類樣式

比如說這個pure_top元素(因為這里是小程序所以用的是view，h5也是一樣實現的啦)，我設置的樣式如下:

.pure_top {

width: 100%;

height: 100px;

position: relative;

z-index: -1;

overflow: hidden;

}

.pure_top::after {

content: '';

width: 140%;

height: 100px;

position: absolute;

left: -20%;

top: 0;

z-index: -1;

border-radius: 0 0 50% 50%;

background: #1496f1;

}

如何在元素后追加一個after，當然是元素自身定位為relative，偽類設置content:‘’，并相對定位為absolute，再設置下left ,top 值，使偽類元素的位置擺放的合理就行了。

這里需要注意的是我把z-index值設為-1，因為弧形一般是作為背景圖的，所有層級自然要放低些。

實現效果如下圖：

上面的圖看起來好像弧度太大，幾乎要看不出。依上面的實現原理，弧度要多少可以是自己微調。看上面的偽類.pure_top::after { content: '';width: 140%;}寬度為140%，難怪弧度那么大呢？半徑越大，弧度就越大(我應該沒記錯吧哈哈哈哈哈哈)，那我們是不是可以減小半徑來達到變小弧度的需求？看下圖的實現：

.gradient_top {

width:100%;

height: 330rpx;

position: relative;

z-index: -1;

overflow: hidden;

}

.gradient_top::after {

content: '';

width: 100%;

height: 330rpx;

position: absolute;

left: 0;

top:0;

z-index: -1;

border-radius: 0 0 80% 80%;

background: linear-gradient(160deg,#1496f1, #E0F0FA);

}

這里把偽類的寬設為100%，left ， top值自然就為0了。

這里可以看到，如果要設置漸變，把background設為漸變就可以了，但是注意，我都是把顏色設置在偽類上的。

學會了就快去實現你豐富多彩的界面吧~

關注公眾號【grain先森】，回復關鍵詞 【18福利】，獲取為你準備的年終福利，更多關鍵詞玩法期待你的探索~

總結

以上是生活随笔為你收集整理的css3弧形跑道效果_Css 实现漂亮弧形的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。