html图形渐变颜色一半一半,CSS3教程:background-image之放射性渐变(radial-gradient)详解...

写完了linear-gradient线性渐变的初级教程后,看到了Lea Veron博客上那个用渐变做的图案集,我瞬间就觉得自己的想象力弱爆了。

html图形渐变颜色一半一半,CSS3教程:background-image之放射性渐变(radial-gradient)详解..._第1张图片

容我躺躺,再站起来继续战斗!

缓过来了,开讲放射性渐变吧。

一、放射性渐变原理

别人都用ps解释,我却在渐变上独喜欢flash的渐变变形工具。

别人都说径向渐变,flash里面显示的是放射性渐变,我就沿用了放射性渐变的说法。你看出来啦,我曾经是flash的迷妹!

html图形渐变颜色一半一半,CSS3教程:background-image之放射性渐变(radial-gradient)详解..._第2张图片

放射性渐变的核心就是:从中心点出发,辐射到边界处。

设置了四个色块,如图:

429079e8282c5076af4170153c1af3d0.png

用渐变变形工具可以查看

你可能感兴趣的:(html图形渐变颜色一半一半)