使用CSS3的线性渐变(linear-gradient)和径向渐变(radial-gradient)属性可以制作渐变背景色。
线性渐变的语法为:
background: linear-gradient(direction, color-stop1, color-stop2, ...);
其中,direction指定了渐变的方向,可以是角度、关键字或者两个关键字组成的方向。color-stop指定了颜色的起始位置和颜色值。可以为每个颜色值指定一个位置。具体语法如下:
background: linear-gradient(to right, #ff0000, #0000ff); background: linear-gradient(45deg, #ff0000 0%, #0000ff 100%);
径向渐变的语法为:
background: radial-gradient(shape size at position, start-color, ..., last-color);
其中,shape指定了渐变的形状,可以是圆形或者椭圆形。size指定了形状的大小,可以是关键字、长度或者百分比。at position指定了渐变的中心位置。start-color和last-color指定了颜色的起始位置和颜色值。具体语法如下:
background: radial-gradient(circle, #ff0000, #0000ff); background: radial-gradient(ellipse at center, #ff0000 0%, #0000ff 100%);
使用CSS3的background-image属性和渐变属性可以制作渐变图像。
语法为:
background-image: linear-gradient(direction, color-stop1, color-stop2, ...); background-image: radial-gradient(shape size at position, start-color, ..., last-color);
其中,direction、shape、size、at position、start-color和last-color的含义与制作渐变背景色相同。具体语法如下:
background-image: linear-gradient(to right, #ff0000, #0000ff); background-image: radial-gradient(circle, #ff0000, #0000ff);