径向渐变
什么是径向渐变?
- 径向渐变就是沿着圆周或者椭圆周向外扩散的渐变。
用法:
- background-image: radial-gradient();
- radial(adj. 辐射状的;中心区域的;径向;放射状的)
- gradient(n. 梯度,陡度;adj. 倾斜的 网络. 渐变)
加上参数即可使用: - background-image: radial-gradient( #E94E65, #1574A8);
- 上述代码会在元素的显示范围内创建一个椭圆形,把渐变的中心点(红色)放在元素的中心上。
拓展1:
- 我们还可以在颜色值前面加上 circle 关键字,创建圆形的渐变。
- background-image: radial-gradient( circle, #E94E65, #1574A8);
拓展2:设置径向渐变的中心点 - 可以用关键字 at 后面加上 background-position 属性支持的定位关键字和数值,指定渐变中心的位置,设置在元素的左上方(20% 20%)
- background-image: radial-gradient( circle at 20% 20%, #E94E65, #1574A8);