前些天写了一篇关于背景的渐变色,今天来详细记录以下关于渐变:
渐变: 线性渐变 线性渐变(Linear Gradients)- 向下/向上/向左/向右/对角方向 /角度
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
径向渐变 径向渐变(Radial Gradients)- 由它们的中心定义
径向渐变由它的中心定义。
为了创建一个径向渐变,你也必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时,你也可以指定渐变的中心、形状(圆形或椭圆形)、大小。默认情况下,渐变的中心是 center(表示在中心点),渐变的形状是 ellipse(表示椭圆形),渐变的大小是 farthest-corner(表示到最远的角落)。
background-image: radial-gradient(shape size at position, start-color, ..., last-color);
shape 参数定义了形状。它可以是值 circle 或 ellipse。其中,circle 表示圆形,ellipse 表示椭圆形。默认值是 ellipse。
background-image: radial-gradient(circle, red, yellow, green);
size 参数定义了渐变的大小。它可以是以下四个值:
-
closest-side
-
farthest-side
-
closest-corner
-
farthest-corner
#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() 函数用于重复径向渐变:
background-image: repeating-radial-gradient(red, yellow 10%, green 15%);