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

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

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

.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，當(dāng)然是元素自身定位為relative，偽類設(shè)置content:‘’，并相對定位為absolute，再設(shè)置下left ,top 值，使偽類元素的位置擺放的合理就行了。

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

實現(xiàn)效果如下圖：

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

.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);

}

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

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

學(xué)會了就快去實現(xiàn)你豐富多彩的界面吧~

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。