CSS 高阶小技巧 - 角向渐变的妙用!

发布网友 发布时间:2024-10-01 15:06

我来回答

1个回答

热心网友 时间:2024-10-01 16:22

本文将揭示一个关于角向渐变CSS的小技巧!

让我们尝试用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订阅收藏。

如果还有什么疑问或者建议,可以多多交流,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。

声明声明:本网页内容为用户发布,旨在传播知识,不代表本网认同其观点,若有侵权等问题请及时与本网联系,我们将在第一时间删除处理。E-MAIL:11247931@qq.com