CSS3 渐变效果 - 技术栈

1. 引言

CSS3 渐变能够在指定颜色之间创建平滑过渡效果。这种设计元素不仅能为网页增添丰富的视觉层次，更是现代网页设计的重要组成部分。CSS3 提供两种主要的渐变类型：线性渐变(Linear Gradient) - 沿直线方向进行颜色过渡；径向渐变(Radial Gradient) - 以中心点为起点向外扩散的颜色变化。

2. 线性渐变（Linear Gradients）

2.1 基本语法

js 复制代码

background: linear-gradient(direction, color-stop1, color-stop2, ...);

2.2 方向设置

使用角度：

css 复制代码

/* 0deg 从下到上 */
/* 45deg 从左下角到右上角 */
/* 90deg 从左到右 */
/* 180deg 从上到下 */
/* 270deg 从右到左 */
.angle-gradient {
    background: linear-gradient(45deg, #ff0000, #00ff00);
}

效果图：

使用关键词：

css 复制代码

/* 可用值：to top, to bottom, to left, to right, to top left, to top right 等 */
.keyword-gradient {
    background: linear-gradient(to right, #ff0000, #00ff00);
}

效果图：

2.3 颜色节点设置

css 复制代码

/* 使用百分比控制颜色分布 */
.color-stops {
    background: linear-gradient(to right,
        red 0%,
        orange 25%,
        yellow 50%,
        green 75%,
        blue 100%
    );
}

效果图：

3. 径向渐变（Radial Gradients）

3.1 基本语法

css 复制代码

background: radial-gradient(shape size at position, color-stop1, color-stop2, ...);

3.2 形状和大小

形状配置

circle：生成圆形渐变。
ellipse：生成椭圆形渐变（默认值）。

大小配置

closest-side：渐变结束于离中心最近的边。
farthest-side：渐变结束于离中心最远的边。
closest-corner：渐变结束于离中心最近的角。
farthest-corner：渐变结束于离中心最远的角（默认值）。

css 复制代码

/* 圆形渐变 */
.circle-gradient {
    background: radial-gradient(circle, #ff0000, #00ff00);
}

/* 椭圆形渐变 */
.ellipse-gradient {
    background: radial-gradient(ellipse, #ff0000, #00ff00);
}

/* 大小配置 */
background: radial-gradient(closest-side circle, red, blue);

效果图

3.3 位置设置

css 复制代码

/* 使用关键词 */
.position-gradient {
    background: radial-gradient(circle at center, #ff0000, #00ff00);
}

/* 使用具体值 */
.custom-position {
    background: radial-gradient(circle at 100px 100px, #ff0000, #00ff00);
}

效果图：

4. 重复渐变

4.1 重复线性渐变

css 复制代码

.repeating-linear {
    background: repeating-linear-gradient(
        45deg,
        #ff0000 0px,
        #ff0000 10px,
        #00ff00 10px,
        #00ff00 20px
    );
}

效果图：

4.2 重复径向渐变

css 复制代码

.repeating-radial {
    background: repeating-radial-gradient(
        circle at center,
        #ff0000 0px,
        #ff0000 10px,
        #00ff00 10px,
        #00ff00 20px
    );
}

5. 高级技巧

5.1 多重渐变叠加

css 复制代码

.multiple-gradients {
    background: 
        linear-gradient(45deg, rgba(255,0,0,0.5), transparent),
        linear-gradient(-45deg, rgba(0,0,255,0.5), transparent);
}

效果图：

5.2 渐变文字效果

css 复制代码

.gradient-text {
    background: linear-gradient(45deg, #ff0000, #00ff00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

效果图：

6. 浏览器兼容性

为了确保在不同浏览器中正常显示渐变效果，建议添加浏览器前缀：

css 复制代码

.cross-browser-gradient {
    background: -webkit-linear-gradient(left, #ff0000, #00ff00);    /* Safari 5.1-6 */
    background: -o-linear-gradient(right, #ff0000, #00ff00);        /* Opera 11.1-12 */
    background: -moz-linear-gradient(right, #ff0000, #00ff00);      /* Firefox 3.6-15 */
    background: linear-gradient(to right, #ff0000, #00ff00);        /* 标准语法 */
}