CSS 高阶小技巧 - 角向渐变的妙用!
发布网友
发布时间：2024-10-01 15:06
共1个回答
热心网友
时间：2024-10-01 16:22
让我们尝试用CSS绘制以下图形：
在此之前，我们曾尝试过类似图案的绘制，在《单标签实现复杂的棋盘布局》一文中，我们用单标签实现了这样一个棋盘布局：
那么，本文有何特殊之处？让我们一探究竟。
首先，我们希望使用一个标签完成上述布局，这并没有问题。
利用渐变可以多层的特性，我们快速完成页面的网格形状，假设我们的结构如下：
利用两层重复线性渐变，我们可以快速得到这样一个图案：
有了这样一个网格之后，接下来要解决的就是如何绘制一个一个的小十字：
在棋盘布局中，我们尝试过使用多重box-shadow实现类似的图案。
本文，我们将尝试使用角向渐变，快速实现这个图形！
在此之前，我们先来学习角向渐变的技巧。
对于不熟悉conic-gradient角向渐变的读者，可以先参考我的这篇文章《神奇的 conic-gradient 角向渐变》。
举个例子：
从渐变的圆心、渐变起始角度以及渐变方向上来说，是这样的：
划重点：
从图中可以看到，角向渐变的起始圆心点、起始角度和渐变方向为：
当然，我们也可以控制角向渐变的起始角度以及角向渐变的圆心。
稍微改一下上述代码：
效果如下：
我们改变了起始角度以及角向渐变的圆心：
了解了这个之后，我们基于上述图形，重新绘制一个图形：
效果如下：
起始角度以及角向渐变的圆心没有改变，但是只让前90度的图形为粉色，而后270度的图形，设置为了透明色。
我们利用角向渐变，在图像内部，又实现了一个小的矩形！
接下来，我们再给上述图形，增加一个background-position: -25px, -25px：
这样，我们就神奇地得到了这样一个图形：
为什么会有这种现象？如果我们在代码中加入background-repeat: no-repeat：
那么就只会剩下左上角一个角：
因此，这里实际上利用了渐变图形默认会 repeat 的特性，实际上是这么个意思：
理解了这张图，也就理解了整个技巧的核心所在！
理解了上述技巧，我们再回到我们需要实现的图形中，利用多两层角向渐变，我们就能得到我们想要的图形。
第一层：
效果如下：
这里我们做了什么呢？我们新增的渐变在最上层，也就是第一层渐变：
第二层角向渐变叠加，如法炮制即可：
这样，我们就完美地实现了我们需要的图形效果：
完整的代码，你可以戳这里：CodePen Demo -- Conic Gradient Skill Demo
总结一下，本文介绍了利用角向渐变conic-gradient的position的小技巧，组合实现了看似很复杂的网格布局图案。
好了，本文到此结束，希望本文对你有所帮助 :)
更多精彩CSS技术文章汇总在我的Github -- iCSS，持续更新，欢迎点个star订阅收藏。
如果还有什么疑问或者建议，可以多多交流，原创文章，文笔有限，才疏学浅，文中若有不正之处，万望告知。
