一文教你掌握 CSS 渐变属性linear-gradient、radial-gradient
CSS 渐变属性 linear-gradient
和 radial-gradient
可以创建从一种颜色平滑过渡到另一种颜色的效果。
线性渐变(linear-gradient):
语法:
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
示例代码:
div {
background-image: linear-gradient(to right, red, yellow);
}
径向渐变(radial-gradient):
语法:
background-image: radial-gradient(shape size at position, start-color, ..., last-color);
示例代码:
div {
background-image: radial-gradient(circle, red, yellow, green);
}
在这些示例中,div
元素将显示从左到右的红色到黄色的线性渐变,以及从中心向外的红色到黄色到绿色的径向渐变。
评论已关闭