Css实现漂亮弧形
⼩编推荐：提供JS错误监控、⼩程序错误监控、⼩游戏错误监控，Node.j错误监控和Java错误监控。真的是⼀个很好⽤的错误监控费服务，众多⼤佬公司都在使⽤。
在实现页⾯五花⼋门的有特⾊的ui时，我们有时会遇到要⽤实现⼀个弧形，⽽这样的弧形要怎么实现呢？⽤图⽚？好像不⼤现实，因为这样就要⽆故多加载⼀张图⽚了，这⾥我们来说说怎么⽤css的after伪类来实现弧形。
先是⼀写元素，再给这个元素设置样式和伪类样式
<view class="pure_top"></view>
⽐如说这个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;
border radius什么意思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设为渐变就可以了，但是注意，我都是把颜⾊设置在伪类上的。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。