新手必看！CSS魔法变方块成圆角，网页瞬间神奇起来

利用圆的衔接实现

想让网页看起来更像真的？试下 CSS 方块变圆~刚才说的那个简单极了！但别忘了，做得好看还需注意几点！首先，先搞出个空心长方形，就跟图上一样，接着摆放三个圆形，调调颜色，大小差不多了就能拼好。不过，这种方法用在花里胡哨的背景上可能看着有点儿别扭。

通过filter实现

想把东西变好看点，别太复杂，用CSS滤镜就可以了。开始可能有点懵，别急，搞清楚后，简直就是小菜一碟！先画好图，再加点filter: contrast()filter: blur()，调高对比度跟模糊度，原本方块般的直角立刻变成圆润可爱的角色。试看下效果，保准你满意到飞起！

细节注意事项

div {
    height: 200px;
    background: 
        linear-gradient(90deg, #9c27b0, #9c27b0 110px, transparent 110px, transparent 190px, #9c27b0 190px),
        linear-gradient(90deg, #9c27b0, #9c27b0);
    background-size: 100% 20px, 100% 100%;
    background-position: 0 0, 0 20px;
    background-repeat: no-repeat;
}

要做好圆角效果不难，重点有三点。首先，外面也要有圆角才行；其次，如果要用直角怎么办？直接在上面放个假的元素就搞定了；再来，为啥要模糊边缘？秘密就在这儿，这样处理后更适合当背景，里面的信息看起来也就清晰多了。最后再提个醒，要留意下元素如何重叠！

其他实现方式

div {
    ...
    &::before {
        position: absolute;
        content: "";
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: #000;
        left: 90px;
        box-shadow: 40px 0 0 #000, 80px 0 0 #000;
    }
}

哈喽，除了之前提到的那两个绝技外，我再教你几招实在的，也能弄出那种内凹平滑圆角的感觉来！咱就当玩堆积木，重点就是让人眼花缭乱。然后，我们来说说滤镜怎么使这事儿，看看它到底牛在哪里。

总结与展望

瞅瞅这篇文章，教你玩转CSS凹陷圆角的技能~上手以后就会觉得简单又好玩哒。前端开发这么酷，里面的小技能真是多得数不清。时代发展快，新的手法也是层出不穷呐～

有没有试过用CSS做内凹圆角？分享一下感受，我们来聊聊实战体验。

。