CSS 实现 DIV 弧形底部

更新日期: 2020-11-19 阅读次数: 4248 字数: 368 分类: CSS

见过两种实现方式,但是只有第一种的效果更平滑。

以微信小程序模板代码为例:

<view class="person_info">
</view>

第一种,两个 div 拼接

实现的逻辑是,利用 after 创建一个相对大的底部圆形的 view,露出下面的部分。

需要注意的是,height 一定要比父级元素高,left 按比例对称调节。

.person_info {
  width: 100%;
  height: 400rpx;
  background-image: linear-gradient(180deg, #66ccff 0%, #41b5f0 100%);
  position: relative;
}

.person_info:after {
    background-color: #41b5f0;
    content: '';
    width: 160%;
    height: 450rpx;
    position: absolute;
    left: -30%;
    top:0;
    z-index: -1;
    border-radius: 0 0 50% 50%;
}

效果:

CSS 实现 DIV 弧形底部

缺点:

在 ios 上会出现宽度问题,导致可以左右滑动;但是 Android 上无此问题。

所以也不推荐。

第二种,border-bottom-left-radius

参考 https://developer.mozilla.org/zh-CN/docs/Web/CSS/border-bottom-left-radius

/* 一个参数时,是圆形 */
/* border-bottom-left-radius: radius */
border-bottom-left-radius: 3px;

/* 两个个参数时,是椭圆形 */
/* border-bottom-left-radius: 水平方向 垂直方向 */
border-bottom-left-radius: 0.5em 1em;

代码:

.person_info {
  width: 100%;
  height: 400rpx;
  background-image: linear-gradient(180deg, #66ccff 0%, #41b5f0 100%);
  border-bottom-left-radius: 60% 15%;
  border-bottom-right-radius: 60% 15%;
}

但是实际效果不好,如图:

CSS 实现 DIV 弧形底部

可以看到两侧边缘不够圆润。。。中间部分没有弧度。

所以还是推荐第一种方法。

魔幻的 after 用法

after 的说明 https://developer.mozilla.org/en-US/docs/Web/CSS/::after

after 的文档里,可没有说明还有这种用途。我觉得脑洞太大了。

同样的疑问:https://stackoverflow.com/questions/34827794/when-to-use-before-or-after

领取阿里云/腾讯云服务器优惠券

关于作者

我是来自山东烟台的一名开发者,喜欢瞎折腾,顺便记记笔记。有敢兴趣的话题,欢迎加微信 zhongwei 聊聊, 查看更多联系方式。 白天写程序,晚上哄熊孩子,可能回复有点慢,见谅。同时也欢迎关注我的微信公众号“大象工具”: 大象工具微信公众号

相关文章

谈笑风生

Be_Young

请问:第一种用法里面的伪类的position为什么要设置为absolute啊?
请email我,解释一下在下的疑问,万分感谢!

Be_Young

因为view是伪类的兄弟元素,所以伪类需要脱离文档流,所以设置为absolute,是这样嘛?
抱歉,我之前提了一个低能问题

不符合

第一种方法横向不会溢出导致滑动吗

爱评论不评论

近期节日

2020年12月01日 世界艾滋病日
2020年12月03日 国际残疾人日
2020年12月07日 大雪
2020年12月09日 "一二九"运动纪念日
2020年12月09日 世界足球日
2020年12月10日 世界人权日
2020年12月12日 西安事变纪念日
2020年12月13日 南京大屠杀
2020年12月20日 澳门回归日
2020年12月21日 国际篮球日
2020年12月21日 冬至
2020年12月24日 平安夜
查看更多节日