CSS: 一个背景色+两重径向渐变的实例

马黑黑 · 发表于 2022-5-6 07:55

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由马黑黑于 2022-5-6 07:57 编辑

先看以下一组CSS+HTML代码：

.bgBox {
   margin: auto;
   width: 400px;
   height: 400px;
   background: rgba(0,0,0,.15);
   background-image: radial-gradient(closest-side,transparent 98%,rgba(0,0,0,0.3) 99%);
   background-position: 0 0;
   background-size: 80px 80px;
}
</style>

<div class="bgBox"></div>

这会是什么样子呢？

效果

正如我们所看到的，“画布”里有25个圆。我们的画布是400*400的尺寸，径向渐变默认为椭圆的形状，但在宽高一致尺寸的场景下，椭圆变成了圆。渐变背景大小我们设置为80*80，所以画布里能安排的圆就是25个。径向渐变中，我们用透明色和有较高透明度的黑色按一定比例布局，形成了接近白色的圆。同时请注意背景的位置设定，background-position，其{xy}坐标都是0；还有背景大小，background-size，它也有大作用，如果没有background-size的宽高80*80的设定，画布中只出现一个大圆。

现在再看下面的效果：

效果

这是在前面的基础上再加入一组完全相同的径向渐变背景色，但两组径向渐变背景的位置设置的不一样。以下是改变后的代码：

.bgBox {
   margin: auto;
   width: 400px;
   height: 400px;
   background: rgba(0,0,0,.15);
   background-image:
      radial-gradient(closest-side,transparent 98%,rgba(0,0,0,0.3) 99%),
      radial-gradient(closest-side,transparent 98%,rgba(0,0,0,0.3) 99%);
   background-position: 0 0, 40px 40px;
   background-size: 80px 80px;
}

和之前的代码比较，很容易发现所添加的另一组径向渐变和前面一组是一模一样的，背景大小background-size也不变，背景位置background-position原先的即第一组渐变背景位置不变，{xy}依然是{0 0}，第二组{xy}坐标位置是{40px 40px}——这是形成最终效果的关键所在，位置为{0 0}和{ 40px 40px}相邻的两个圆相互遮挡又有重合部分，从而构成了美妙的图案。

马黑黑 · 发表于 2022-5-6 08:04

本帖最后由马黑黑于 2022-5-6 08:22 编辑

尝试在本地测试一下这组代码：

<style>
.bgBox {
   margin: auto;
   width: 400px;
   height: 400px;
   background: rgba(0,0,0,.15);
   background-image:
      radial-gradient(closest-side,transparent 98%,rgba(0,0,0,0.3) 99%),
      radial-gradient(closest-side,transparent 98%,rgba(0,0,0,0.3) 99%);
   background-position: 0 0, 200px 200px;
}
</style>

<div class="bgBox"></div>