CSS3 径向渐变
❮ CSS3 渐变
CSS3 阴影效果 ❯
CSS3 径向渐变
更新于 2024/5/20 5:07:00
CSS3 径向渐变
径向渐变由其中心定义。
如需创建径向渐变，您还必须定义至少两个色标。
语法
background-image: radial-gradient(shape size at position, start-color, ..., last-color);
默认地，shape 为椭圆形，size 为最远角，position 为中心。
径向渐变-均匀间隔的色标（默认）
下面的例子展示了带有均匀间隔的色标的径向渐变:
实例
#grad { background-image: radial-gradient(red, yellow, green);}
亲自试一试 »
径向渐变-不同间距的色标
下面的例子展示了一个径向渐变，其色标之间的间隔不同:
实例
#grad { background-image: radial-gradient(red 5%, yellow 15%, green 60%);}
亲自试一试 »
设置形状
shape 参数定义形状。它可接受 circle 或 ellipse 值。默认值为 ellipse（椭圆）。
下面的例子展示了一个圆形的径向渐变:
实例
#grad { background-image: radial-gradient(circle, red, yellow, green);
}
亲自试一试 »
使用大小不同的关键字
size 参数定义渐变的大小。它可接受四个值:
closest-side
farthest-side
closest-corner
farthest-corner
实例
设置了不同 size 关键词的径向渐变:
#grad1 { background-image: radial-gradient(closest-side at 60% 55%, red, yellow,
black);}
#grad2 {
background-image: radial-gradient(farthest-side at 60%
55%, red, yellow, black);}
亲自试一试 »
重复径向渐变
repeating-radial-gradient() 函数用于重复径向渐变:
实例
A repeating radial gradient:
#grad { background-image:
repeating-radial-gradient(red, yellow 10%, green 15%);}
亲自试一试 »
CSS3 习题和测验
测验 1 »
测验 2 »
测验 3 »
测验 4 »
测验 5 »
测验 6 »
测验 7 »
CSS3 渐变属性
下表列出了 CSS 渐变属性:
属性
描述
background-image
为一个元素设置一幅或多幅背景图像。
❮ CSS3 渐变
CSS3 阴影效果 ❯