Css 实现漂亮弧形 |
您所在的位置:网站首页 › Css弧形展示效果 › Css 实现漂亮弧形 |
小编推荐:Fundebug提供JS错误监控、微信小程序错误监控、微信小游戏错误监控,Node.j错误监控和Java错误监控。真的是一个很好用的错误监控费服务,众多大佬公司都在使用。 在实现页面五花八门的有特色的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先森 链接:https://www.jianshu.com/p/e1ea2ed65ff1 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |