CSS伪类实现圆弧

最新推荐文章于 2024-05-27 14:48:10 发布

出太阳下雨�

最新推荐文章于 2024-05-27 14:48:10 发布

阅读量1.7k

点赞数 1

分类专栏： HTML/CSS

本文链接：https://blog.csdn.net/A20190518/article/details/102871297

版权

HTML/CSS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

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;
    }