CSS3渐变
CSS3 渐变是使用 linear-gradient()
或 radial-gradient()
函数创建的。
线性渐变(Linear Gradients):
.linear-gradient {
background: linear-gradient(direction, color-stop1, color-stop2, ...);
}
示例:
div {
background: linear-gradient(to right, red, yellow);
}
径向渐变(Radial Gradients):
.radial-gradient {
background: radial-gradient(shape size at position, start-color, ..., last-color);
}
示例:
div {
background: radial-gradient(circle, red, yellow, green);
}
方向可以用角度或方位词(如 to top
, to right
等)来指定。径向渐变的形状可以是 circle
或 ellipse
,大小可以设置为 closest-side
, farthest-side
, closest-corner
, farthest-corner
, 或者特定的宽度和高度。位置决定渐变的中心点,可以是百分比或具体像素值。
评论已关闭