在實現(xiàn)頁面五花八門的有特色的ui時，我們有時會遇到要用實現(xiàn)一個弧形，而這樣的弧形要怎么實現(xiàn)呢？用圖片？好像不大現(xiàn)實，因為這樣就要無故多加載一張圖片了，這里我們來說說怎么用css的after偽類來實現(xiàn)弧形。
先是一寫元素，再給這個元素設(shè)置樣式和偽類樣式
<view class="pure_top"></view>
比如說這個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)鍵詞玩法期待你的探索~
