CSS开发者大会归来——如何用CSS创建一个内凹圆角

[YIXUNFE]

CSS开发者大会归来——如何用CSS创建一个内凹圆角

写本篇文章是介绍一下在8.8号举办的第二届CSS开发者大会上，由CSS魔法为大家讲述的一个CSS技巧——纯CSS创建一个内凹圆角。希望能有更多的人，通过这个案例，重新燃起对CSS的那份激情。

进入正片，有一个传说，它是这样的...

在设计师给到一个这样tab标签页的设计稿时

你很可能会对设计师说，不行，这个实现不了。因为你注意到，每一个标签页，底部都带有两个延伸出的图形。先劝你慢点回绝设计师的要求，因为我们将难点分解出来后，剩下的问题就是如何创建这么一个内凹圆角。

简单直接的，当然是用图片了。

但是这里我们将要见到一个用纯CSS实现内凹圆角的过程。

CSS怎么实现？

面对这个疑问，可能大多数人首先想到的是用一个白色扇形，叠加在图形上，就可以产生内凹圆角效果。但很可惜，这个方案在我们的场景下是自欺欺人的，因为我们的扇形区域应该是透明的。

那么我们CSS中，还有哪些属性，和圆形相关并且能够给我们提供透明圆形呢？

（思考ING）

渐变

对！就是渐变！

首先我们先看一下线性渐变

上图取自Photoshop中渐变面板，长条形区域的上方两端有两个色标，一个是黑色表示透明100%，一个是白色表示透明0。下方只有一个色标，表示渐变是从绿色到透明色。当我们增加一个透明度100%的色标

两个透明度100%的色标之间并没有渐变效果产生，当我们再加一个透明度0的色标

两个透明度0的色标之间，也没有产生渐变。那么我们将中间两个色标重叠，会怎么样呢？

神奇！渐变效果没了！产生的是两个截然分明的区域。

我们再将这个方法使用在径向渐变上，就会得到一个透明的圆形

将径向渐变的圆心偏移至顶点

我们就能获取到我们想要的图形了

如此这般，内凹圆角效果便出来了(此处应有掌声)。

非常棒的一次CSS图形制作讲解，令人激情澎湃，CSS又一次惊艳到了大家。

---

这里再简单介绍一下CSS魔法推荐的3本CSS经典丛书。

CSS权威指南

精通CSS

CSS secrets

前两本都有中文版，其中的《精通CSS》也作为我们易讯前端团队学习CSS的宝典秘籍，受到团队的一致好评。

第三本书目前尚无中文版本，由魔法哥担当译制工作，大家可以关注魔法哥的微博来了解最新的译制进度。