CSS实现底部弧度效果

最新推荐文章于 2025-01-09 08:20:02 发布

转载最新推荐文章于 2025-01-09 08:20:02 发布 · 1k 阅读

CC 4.0 BY-SA版权

原文链接：https://blog.youkuaiyun.com/sweet_o/article/details/88816045?utm_medium=distribute.pc_aggpage_search_result.none-task-blog-2~all~first_rank_v2~rank_v25-5-88816045.nonecase&utm_term=css%E5%BC%A7%E5%BA%A6

Vue 专栏收录该内容

20 篇文章

订阅专栏

本文介绍了使用CSS伪元素`:after`实现两种不同的视觉效果的方法。一种是通过设置相对定位及背景渐变来营造特殊顶部样式；另一种则是在元素底部添加白色圆形装饰，提升页面美观度。

效果图1：

<div class="box">

<div class="home_top"> 这里是内容 </div>

</div>


.box { width: 250px; margin: auto; overflow: hidden; }

.home_top { position: relative; width: 100%; height: 100px; text-align: center; line-height: 50px; }

.home_top:after { width: 140%; height: 100px; position: absolute; left: -20%; top: 0; z-index: -1; content: ''; border-radius: 0 0 50% 50%; background: linear-gradient(#2CBAF9, #04A9F4); }

效果图2：

.focus{ position: relative;}

.focus:after{ position:absolute; left:0; right:0; bottom:-11px; content:""; z-index:1; height:20px; width:100%; border-radius:50%; background:#fff;}