CSS伪类实现圆弧

CSS伪类实现平滑圆弧

在移动端布局时，经常会见到边框圆弧效果，见如下效果图： 为了达到更好的效果，经常会用伪类实现

HTML结构：

<div class="box"></div>

CSS样式：

.box{ position: relative; width: 300px; height: 100px; z-index: -1; overflow: hidden; } .box::after{ content: ''; width: 140%; height: 100%; position: absolute; left: -20%; top: 0; z-index: -1; border-radius: 0 0 50% 50%; background: #ccc; }