CSS渐变详解与创意应用

CSS渐变详解与创意应用什么是CSS渐变CSS渐变是一种使用CSS创建平滑颜色过渡的技术无需使用图像。CSS提供了两种主要的渐变类型线性渐变和径向渐变以及重复渐变的变体。线性渐变线性渐变是沿直线方向的颜色过渡。基本语法/* 基本语法 */ background: linear-gradient(direction, color-stop1, color-stop2, ...); /* 示例 */ background: linear-gradient(red, blue);方向控制可以使用角度或方向关键字来控制渐变方向。/* 使用角度 */ background: linear-gradient(45deg, red, blue); /* 使用方向关键字 */ background: linear-gradient(to right, red, blue); background: linear-gradient(to bottom right, red, blue);颜色停止点可以指定颜色停止点的位置控制颜色过渡的位置。/* 均匀分布 */ background: linear-gradient(red, green, blue); /* 自定义位置 */ background: linear-gradient(red 0%, green 50%, blue 100%); background: linear-gradient(red 0%, green 20%, blue 80%);透明度可以使用RGBA或HSLA颜色创建透明渐变。background: linear-gradient(rgba(255, 0, 0, 0), rgba(255, 0, 0, 1)); background: linear-gradient(hsla(0, 100%, 50%, 0), hsla(0, 100%, 50%, 1));径向渐变径向渐变是从中心点向外辐射的颜色过渡。基本语法/* 基本语法 */ background: radial-gradient(shape size at position, color-stop1, color-stop2, ...); /* 示例 */ background: radial-gradient(red, blue);形状和大小可以指定渐变的形状circle或ellipse和大小。/* 圆形 */ background: radial-gradient(circle, red, blue); /* 椭圆形 */ background: radial-gradient(ellipse, red, blue); /* 自定义大小 */ background: radial-gradient(circle at 50% 50%, red 0%, blue 100%); background: radial-gradient(ellipse at top left, red 0%, blue 100%);颜色停止点与线性渐变类似可以指定颜色停止点的位置。background: radial-gradient(red 0%, green 50%, blue 100%); background: radial-gradient(circle, red 0%, green 20%, blue 80%);重复渐变可以创建重复的线性或径向渐变。重复线性渐变background: repeating-linear-gradient(45deg, red, red 10px, blue 10px, blue 20px); background: repeating-linear-gradient(to right, red, green 10%, blue 20%);重复径向渐变background: repeating-radial-gradient(circle, red, red 10px, blue 10px, blue 20px); background: repeating-radial-gradient(ellipse, red 0%, green 10%, blue 20%);渐变的创意应用1. 按钮效果.button { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 12px 24px; border: none; border-radius: 8px; cursor: pointer; transition: all 0.3s ease; } .button:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); }2. 卡片背景.card { background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); border-radius: 12px; padding: 20px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); }3. 文本效果.gradient-text { background: linear-gradient(4