css3质感分析（5）径向渐变叠加纹理（圆心可变）线性渐变

css3质感系列会详细分析网上流行的css3的一些质感效果，
让大家不再恐惧Css3，最终可以见到一张图片就可以构思出他的css3实现！
三个原则：
渐变叠加的顺序
径向渐变的起点
background-position的运用
1.径向渐变默认的圆心在中心，也即 50% 50%处注意这个数字！（很多人可能会认为是0% 0%）
如图所示我制造一个小圆，根据上一文的知识，只需要起点黄色-到达黄色边界-起点绿色-到达绿色边界-透明的写法即可。

background-image: -webkit-radial-gradient(50% 50% , circle , #D2CAAB 3%, #364E27 4%, #364E27 11%, rgba(54, 78, 39, 0) 12%, rgba(54, 78, 39, 0))

下面我们调整圆心Y轴到100%，很容易理解，图形的圆心会跑到最下边，X轴不变

background-image: -webkit-radial-gradient(50% 100% , circle , #D2CAAB 3%, #364E27 4%, #364E27 11%, rgba(54, 78, 39, 0) 12%, rgba(54, 78, 39, 0))

大家注意，这里有个非常重要的现象，下面残缺了一部分，出现了一个半圆。这就是半圆的画法，再次记住，下面是残缺的
我们同样可以尝试 Y轴到100% x轴也到100% 那么现象应该是图形在右下角的1/4圆;

2 background-position是啥
注意 background-position 只改变的是图案整体的位置！不会破坏图案本身，最多会出现 “穿透”的现象，注意，这与圆心变化是截然不同的

div{width:100px; height:100px; margin-top:10px; border:1px solid #ddd; } div{ background-color: #63773F; background-image: -webkit-radial-gradient(50% 50% , circle , #D2CAAB 3%, #364E27 4%, #364E27 11%, rgba(54, 78, 39, 0) 12%, rgba(54, 78, 39, 0)); background-position:50px 0px; background-size: 100px 100px; }

大家注意，仍然是在中心的渐变，但是向右平移了50px，图案从左边穿透出来了！
一定不要跟圆心变化混淆！
3 渐变叠加性。我们可以尝试

div{width:100px; height:100px; margin-top:10px; border:1px solid #ddd; } div{ background-color: #63773F; background-image: -webkit-radial-gradient(50% 50% , circle , #D2CAAB 3%, #364E27 4%, #364E27 11%, rgba(54, 78, 39, 0) 12%, rgba(54, 78, 39, 0)), -webkit-radial-gradient(50% 60% , circle , red 3%, black 4%, black 11%, rgba(54, 78, 39, 0) 12%, rgba(54, 78, 39, 0)); background-position:50px 0px; background-size: 100px 100px; }

注意上面的把下面的黑色圈子遮住了！！！
即，渐变写在上面的会遮住下面的
3个重要的原则了解完毕后，我们开始做一个非常牛逼的效果。
第一次看到这图，很多人都有种 “吓尿了”的感觉。。其实我也是。。
【css3质感分析（5）径向渐变叠加纹理（圆心可变）】
为了降低难度，我们先分析一个“跬步” 在进行渐变重复。

根据渐变的叠加性，拆分一下

其实怎么拆分都可以，这只是我个人理解而已、
我们配合上面的文章分析一下图片的位置
1号图中心渐变Y轴略靠下（因为图片无损，圆心在边缘）- position X在最右边（总宽度的一半）
2号图中心渐变Y轴略靠上（因为图片无损，圆心在边缘）- position X在最右边（总宽度的一半）
上两张position最右最左都是一样的。
3号图这张图可以有两个理解，一是position Y在最下面，圆心在边缘，之后圆心调整位置，Y轴略增大，靠下
或者是直接position定位到最上面也可以。
4号图类似
5号跟六号我们已经讲过了，一个半圆，所以不需要调整background-position 只需要圆心X轴 100% 或0即可
7号跟八号也很明显，一个半圆，圆心X轴100%或者0 ，跟5号6号类似，之后用background-position X轴，Y轴各调整50px即可。
我们记录下刚才的分析，然后把顺序排列好，注意小圆写在大圆前面即可~

background-image: -webkit-radial-gradient(50% 59% , circle , #D2CAAB 3%, #364E27 4%, #364E27 11%, rgba(54, 78, 39, 0) 12%, rgba(54, 78, 39, 0)),//1号 -webkit-radial-gradient(50% 41% , circle , #364E27 3%, #D2CAAB 4%, #D2CAAB 11%, rgba(210, 202, 171, 0) 12%, rgba(210, 202, 171, 0)),//2号 -webkit-radial-gradient(50% 59% , circle , #D2CAAB 3%, #364E27 4%, #364E27 11%, rgba(54, 78, 39, 0) 12%, rgba(54, 78, 39, 0)),//3号 -webkit-radial-gradient(50% 41% , circle , #364E27 3%, #D2CAAB 4%, #D2CAAB 11%, rgba(210, 202, 171, 0) 12%, rgba(210, 202, 171, 0)),//4号 -webkit-radial-gradient(100% 50% , circle , #D2CAAB 16%, rgba(210, 202, 171, 0) 17%),//5号 -webkit-radial-gradient(0% 50% , circle , #364E27 16%, rgba(54, 78, 39, 0) 17%),//6号 -webkit-radial-gradient(100% 50% , circle , #D2CAAB 16%, rgba(210, 202, 171, 0) 17%), //7号 -webkit-radial-gradient(0% 50% , circle , #364E27 16%, rgba(54, 78, 39, 0) 17%); //8号

之后写好位置（1-8）

background-position: 50px 0px, px 0px, px, px, %, 0 0%, px 50px, px 50px;

之后配好“跬步” 大小

background-size: 100px 100px;

完整代码

div{width:300px; height:300px; margin-top:10px; border:1px solid #ddd; } div{ background-color: #63773F; background-image: -webkit-radial-gradient(50% 59% , circle , #D2CAAB 3%, #364E27 4%, #364E27 11%, rgba(54, 78, 39, 0) 12%, rgba(54, 78, 39, 0)), -webkit-radial-gradient(50% 41% , circle , #364E27 3%, #D2CAAB 4%, #D2CAAB 11%, rgba(210, 202, 171, 0) 12%, rgba(210, 202, 171, 0)), -webkit-radial-gradient(50% 59% , circle , #D2CAAB 3%, #364E27 4%, #364E27 11%, rgba(54, 78, 39, 0) 12%, rgba(54, 78, 39, 0)), -webkit-radial-gradient(50% 41% , circle , #364E27 3%, #D2CAAB 4%, #D2CAAB 11%, rgba(210, 202, 171, 0) 12%, rgba(210, 202, 171, 0)), -webkit-radial-gradient(100% 50% , circle , #D2CAAB 16%, rgba(210, 202, 171, 0) 17%), -webkit-radial-gradient(0% 50% , circle , #364E27 16%, rgba(54, 78, 39, 0) 17%), -webkit-radial-gradient(100% 50% , circle , #D2CAAB 16%, rgba(210, 202, 171, 0) 17%), -webkit-radial-gradient(0% 50% , circle , #364E27 16%, rgba(54, 78, 39, 0) 17%); background-position: 50px 0px, px 0px, px, px, %, 0 0%, px 50px, px 50px; background-size: 100px 100px; }

最复杂的过去了，我们分析几个简单的例子~

我们一眼就可以看出来重复的图像是

根据我们的分析，他有四个重复的1/4圆，这个时候先不要考虑渐变叠加1/4圆，虽然我们也可以很容易的写出来，但是代码较多
这明显是背景一个大圆+ 一个大圆，上移一个半径，左移一个半径，之后上面跟左边都冲开了背景而已。
因此我们的核心代码只有两句
background-position: 0 0px, 40px 40px;
background-size: 80px 80px;
至于渐变的写法，就不用说了。。。一个圆而已。。
另一个技巧画线。这个还是蛮常用的，写法很简单透明起点（像素）+ 线1px +透明即可
background-image: -webkit-radial-gradient(50% 50%, circle, rgba(96, 16, 48, 0) 9px, #613 10px, rgba(96, 16, 48, 0) 11px) 效果：

配合我们讲解的渐变叠加，大家可以考虑一下这个东西怎么做:

点赞前端开发