导航分类

CSS3 背景 CSS3 文本效果

CSS3 渐变

主题

默认模式
浅蓝色模式
淡绿色模式
深夜模式

CSS3 渐变

CSS3 渐变（gradients）允许你在元素背景中创建平滑的过渡颜色效果，而无需使用图像。

CSS3 定义了两种主要的渐变（gradients）类型：

线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
径向渐变（Radial Gradients）- 由它们的中心定义

线性渐变 (Linear Gradients)

CSS3 中background-clip属性，用于控制背景的绘制区域（背景延伸到何处）。

实例代码运行代码

复制

.gradient1 {
    background: linear-gradient(to right, #ff7e5f, #feb47b);
}

.gradient2 {
    background: linear-gradient(to bottom right, #4b6cb7, #182848);
}

.gradient3 {
    background: linear-gradient(45deg, #11998e, #38ef7d);
}

.gradient4 {
    background: linear-gradient(to right, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3);
}

.gradient5 {
    background: linear-gradient(to bottom, rgba(255, 0, 0, 0.8), rgba(255, 0, 0, 0.1));
}

.gradient6 {
    background: repeating-linear-gradient(45deg, #606dbc, #606dbc 10px, #465298 10px, #465298 20px);
}

实现的效果：

从左到右渐变

对角渐变

45度角渐变

彩虹渐变

透明度渐变

重复线性渐变(条纹)

径向渐变 (Radial Gradients)

CSS3 中background-clip属性，用于控制背景的绘制区域（背景延伸到何处）。

实例代码运行代码

复制

.gradient1 {
    background: radial-gradient(at top left, #ffecd2, #fcb69f);
}

.gradient2 {
    background: radial-gradient(closest-side at 30% 60%, #84fab0, #8fd3f4);
}

.gradient3 {
    radial-gradient(ellipse 100% 50% at center, #a6c1ee, #fbc2eb);
}

.gradient4 {
    background: radial-gradient(circle, rgb(255, 0, 0), rgb(255, 127, 0) 25%, rgb(255, 255, 0) 50%, rgb(0, 255, 0) 75%, rgb(0, 0, 255));
}

.gradient5 {
    background: repeating-radial-gradient(circle, rgb(91, 127, 255), rgb(91, 127, 255) 10px, rgb(51, 204, 255) 10px, rgb(51, 204, 255) 20px);
}

.gradient6 {
    background: radial-gradient(circle farthest-corner at 20% 30%, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.5) 30%, rgba(0, 0, 0, 0) 60%), radial-gradient(ellipse at 70% 50%, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.5) 30%, rgba(0, 0, 0, 0) 80%), #3a7bd5;
}

实现的效果：

左上角开始的渐变

指定位置和大小

椭圆大小渐变

多色径向渐变

重复径向渐变

复杂组合渐变

CSS3 背景 CSS3 文本效果

评论区 0

发表评论

教程介绍

CSS3 是 CSS 技术的版本升级，在 CSS 基础上进行了扩展改进，引入了新的特性和模块。

36 章节

69 阅读

0 评论

CSS3 渐变

CSS3 渐变

线性渐变 (Linear Gradients)

实现的效果：

径向渐变 (Radial Gradients)

实现的效果：

CSS 基础教程

CSS3 教程

CSS3 渐变

CSS3 渐变

线性渐变 (Linear Gradients)

实现的效果：

径向渐变 (Radial Gradients)

实现的效果：

CSS 基础教程

CSS3 教程

意见反馈

反馈提交成功