网站的统计代码,网站在线咨询模块,网页插件开发,模板之家免费官网下载CSS3 引入了渐变#xff08;gradients#xff09;#xff0c;它允许在两个或多个指定的颜色之间显示平滑的过渡。CSS3 支持两种类型的渐变#xff1a;
线性渐变#xff08;Linear Gradients#xff09;#xff1a;颜色沿着一条线性路径变化#xff0c;可以是水平、垂直…CSS3 引入了渐变gradients它允许在两个或多个指定的颜色之间显示平滑的过渡。CSS3 支持两种类型的渐变
线性渐变Linear Gradients颜色沿着一条线性路径变化可以是水平、垂直或者对角线方向。径向渐变Radial Gradients颜色从一个起点开始向外扩散形成圆形或者椭圆形的渐变效果。
线性渐变
线性渐变 - 从上到下
这里有一个简单的 CSS3 线性渐变的例子它从上到下应用了颜色的过渡。我们将使用 linear-gradient 函数来创建一个背景这个背景的颜色将从蓝色平滑地过渡到绿色。
HTML:
div classgradient-box/divCSS:
.gradient-box {width: 100%;height: 200px;background: linear-gradient(to bottom, blue, green);
}在这个例子中
.gradient-box 是应用了线性渐变背景的一个 div 元素。width: 100%; 和 height: 200px; 定义了该 div 的尺寸你可以根据需要调整这些值。background: linear-gradient(to bottom, blue, green); 创建了一个从上蓝色到下绿色的线性渐变背景。
如果你想要在网页中看到效果你需要把这个 CSS 样式应用到你的 HTML 文档中并确保 .gradient-box 类被正确应用到了你想要展示渐变效果的元素上。此外如果你希望在实际项目中使用可以考虑添加浏览器前缀以确保更好的兼容性尽管最新的浏览器通常不需要这些前缀。
这是一个完整的示例可以直接复制粘贴到你的 HTML 文件中查看效果
!DOCTYPE html
html
head
style
.gradient-box {width: 100%;height: 200px;background: -webkit-linear-gradient(top, blue, green); /* Safari 5.1 - 6.0 */background: -o-linear-gradient(top, blue, green); /* Opera 11.1 - 12.0 */background: -moz-linear-gradient(top, blue, green); /* Firefox 3.6 - 15 */background: linear-gradient(to bottom, blue, green); /* 标准语法 */
}
/style
/head
bodydiv classgradient-box/div/body
/html这段代码包含了旧版浏览器的支持不过对于现代浏览器来说只需要最后一个 linear-gradient 即可。
线性渐变 - 从左到右
下面是一个简单的 CSS3 线性渐变的例子它从左到右应用了颜色的过渡。我们将使用 linear-gradient 函数来创建一个背景这个背景的颜色将从红色平滑地过渡到紫色。
HTML:
div classgradient-box/divCSS:
.gradient-box {width: 100%;height: 200px;background: linear-gradient(to right, red, purple);
}在这个例子中
.gradient-box 是应用了线性渐变背景的一个 div 元素。width: 100%; 和 height: 200px; 定义了该 div 的尺寸你可以根据需要调整这些值。background: linear-gradient(to right, red, purple); 创建了一个从左红色到右紫色的线性渐变背景。
为了确保在各种浏览器上的兼容性你也可以添加带有前缀的版本尽管最新的浏览器通常不需要这些前缀。这里是一个完整的示例可以直接复制粘贴到你的 HTML 文件中查看效果
!DOCTYPE html
html
head
style
.gradient-box {width: 100%;height: 200px;background: -webkit-linear-gradient(left, red, purple); /* Safari 5.1 - 6.0 */background: -o-linear-gradient(left, red, purple); /* Opera 11.1 - 12.0 */background: -moz-linear-gradient(left, red, purple); /* Firefox 3.6 - 15 */background: linear-gradient(to right, red, purple); /* 标准语法 */
}
/style
/head
bodydiv classgradient-box/div/body
/html这段代码会创建一个全宽的盒子高度为200像素并且有从红色逐渐变为紫色的水平渐变背景。如果你把这段代码放入你的HTML文件并打开它你应该能够看到从左到右的线性渐变效果。
线性渐变 - 对角
当然下面是一个简单的 CSS3 线性渐变的例子它从一个角到对角应用了颜色的过渡。我们将使用 linear-gradient 函数来创建一个背景这个背景的颜色将从左上角蓝色平滑地过渡到右下角橙色。
HTML:
div classgradient-box/divCSS:
.gradient-box {width: 100%;height: 200px;background: linear-gradient(to bottom right, blue, orange);
}在这个例子中
.gradient-box 是应用了线性渐变背景的一个 div 元素。width: 100%; 和 height: 200px; 定义了该 div 的尺寸你可以根据需要调整这些值。background: linear-gradient(to bottom right, blue, orange); 创建了一个从左上角蓝色到右下角橙色的对角线性渐变背景。
为了确保在各种浏览器上的兼容性你也可以添加带有前缀的版本尽管最新的浏览器通常不需要这些前缀。这里是一个完整的示例可以直接复制粘贴到你的 HTML 文件中查看效果
!DOCTYPE html
html
head
style
.gradient-box {width: 100%;height: 200px;background: -webkit-linear-gradient(left top, blue, orange); /* Safari 5.1 - 6.0 */background: -o-linear-gradient(left top, blue, orange); /* Opera 11.1 - 12.0 */background: -moz-linear-gradient(left top, blue, orange); /* Firefox 3.6 - 15 */background: linear-gradient(to bottom right, blue, orange); /* 标准语法 */
}
/style
/head
bodydiv classgradient-box/div/body
/html这段代码会创建一个全宽的盒子高度为200像素并且有从蓝色逐渐变为橙色的对角渐变背景。如果你把这段代码放入你的HTML文件并打开它你应该能够看到从左上角到右下角的线性渐变效果。
此外如果你想让渐变的方向是从右上角到左下角可以使用 to bottom left 或者 left bottom旧版语法作为方向参数。
使用角度
当你想要对线性渐变使用特定的角度时你可以直接在 linear-gradient 函数中指定角度值。角度是从元素的中心开始测量的并且0度指向垂直上侧然后顺时针方向增加度数。
下面是一个 CSS3 线性渐变的例子它使用了一个特定的角度来应用颜色的过渡。我们将创建一个背景这个背景的颜色将从黄色平滑地过渡到紫色渐变的角度是45度。
HTML:
div classgradient-box/divCSS:
.gradient-box {width: 100%;height: 200px;background: linear-gradient(45deg, yellow, purple);
}在这个例子中
.gradient-box 是应用了线性渐变背景的一个 div 元素。width: 100%; 和 height: 200px; 定义了该 div 的尺寸你可以根据需要调整这些值。background: linear-gradient(45deg, yellow, purple); 创建了一个以45度角从黄色过渡到紫色的线性渐变背景。
为了确保在各种浏览器上的兼容性你也可以添加带有前缀的版本尽管最新的浏览器通常不需要这些前缀。这里是一个完整的示例可以直接复制粘贴到你的 HTML 文件中查看效果
!DOCTYPE html
html
head
style
.gradient-box {width: 100%;height: 200px;background: -webkit-linear-gradient(45deg, yellow, purple); /* Safari 5.1 - 6.0 */background: -o-linear-gradient(45deg, yellow, purple); /* Opera 11.1 - 12.0 */background: -moz-linear-gradient(45deg, yellow, purple); /* Firefox 3.6 - 15 */background: linear-gradient(45deg, yellow, purple); /* 标准语法 */
}
/style
/head
bodydiv classgradient-box/div/body
/html这段代码会创建一个全宽的盒子高度为200像素并且有从黄色逐渐变为紫色的45度角线性渐变背景。如果你把这段代码放入你的HTML文件并打开它你应该能够看到按照45度角变化的线性渐变效果。
请注意角度可以是任何正值或负值正角度表示顺时针方向而负角度表示逆时针方向。例如 -45deg 将创建一个与 45deg 相反方向的渐变。
使用多个颜色节点
当你想要创建更复杂的线性渐变效果时可以使用多个颜色节点color stops。每个颜色节点定义了在渐变路径上特定位置的颜色。你可以通过指定不同的颜色和它们的位置来控制渐变的外观。
下面是一个 CSS3 线性渐变的例子它使用了多个颜色节点来创建一个从左到右的渐变包含了红色、黄色、绿色、青色、蓝色和洋红色并且每个颜色都有特定的位置。
HTML:
div classgradient-box/divCSS:
.gradient-box {width: 100%;height: 200px;background: linear-gradient(to right, red 0%, /* 起始颜色 */yellow 25%, /* 第二个颜色位于25%的位置 */green 50%, /* 第三个颜色位于50%的位置 */cyan 75%, /* 第四个颜色位于75%的位置 */blue 100% /* 结束颜色 */);
}在这个例子中
.gradient-box 是应用了多色线性渐变背景的一个 div 元素。width: 100%; 和 height: 200px; 定义了该 div 的尺寸你可以根据需要调整这些值。background: linear-gradient(to right, ...); 创建了一个从左到右的线性渐变背景其中包含6种颜色每种颜色都在特定的百分比位置开始。
为了确保在各种浏览器上的兼容性你也可以添加带有前缀的版本尽管最新的浏览器通常不需要这些前缀。这里是一个完整的示例可以直接复制粘贴到你的 HTML 文件中查看效果
!DOCTYPE html
html
head
style
.gradient-box {width: 100%;height: 200px;background: -webkit-linear-gradient(left, red 0%, yellow 25%, green 50%, cyan 75%, blue 100%); /* Safari 5.1 - 6.0 */background: -o-linear-gradient(left, red 0%, yellow 25%, green 50%, cyan 75%, blue 100%); /* Opera 11.1 - 12.0 */background: -moz-linear-gradient(left, red 0%, yellow 25%, green 50%, cyan 75%, blue 100%); /* Firefox 3.6 - 15 */background: linear-gradient(to right, red 0%, yellow 25%, green 50%, cyan 75%, blue 100%); /* 标准语法 */
}
/style
/head
bodydiv classgradient-box/div/body
/html这段代码会创建一个全宽的盒子高度为200像素并且有从红色逐渐过渡到其他颜色的水平线性渐变背景。如果你把这段代码放入你的HTML文件并打开它你应该能够看到从左到右的六色线性渐变效果。
此外你可以自由地改变颜色的位置百分比或添加更多的颜色节点以达到你想要的效果。如果省略了颜色停止点的位置则浏览器会平均分配这些颜色之间的空间。
使用透明度
在 CSS3 线性渐变中使用透明度可以通过设置颜色的 alpha 通道来实现这允许你创建从完全不透明到半透明甚至完全透明的渐变效果。可以使用 rgba() 或者 hsla() 函数来指定带有透明度的颜色。
下面是一个简单的例子展示了如何创建一个从左到右的线性渐变该渐变从蓝色完全不透明平滑过渡到完全透明
HTML:
div classgradient-box/divCSS:
.gradient-box {width: 100%;height: 200px;background: linear-gradient(to right, rgba(0, 0, 255, 1), /* 蓝色完全不透明 */rgba(0, 0, 255, 0) /* 蓝色完全透明 */);
}在这个例子中
.gradient-box 是应用了线性渐变背景的一个 div 元素。width: 100%; 和 height: 200px; 定义了该 div 的尺寸你可以根据需要调整这些值。background: linear-gradient(to right, ...); 创建了一个从左到右的线性渐变背景其中起始颜色是蓝色并且完全不透明而结束颜色是蓝色但完全透明。
为了确保在各种浏览器上的兼容性你也可以添加带有前缀的版本尽管最新的浏览器通常不需要这些前缀。这里是一个完整的示例可以直接复制粘贴到你的 HTML 文件中查看效果
!DOCTYPE html
html
head
style
.gradient-box {width: 100%;height: 200px;background: -webkit-linear-gradient(left, rgba(0, 0, 255, 1), rgba(0, 0, 255, 0)); /* Safari 5.1 - 6.0 */background: -o-linear-gradient(left, rgba(0, 0, 255, 1), rgba(0, 0, 255, 0)); /* Opera 11.1 - 12.0 */background: -moz-linear-gradient(left, rgba(0, 0, 255, 1), rgba(0, 0, 255, 0)); /* Firefox 3.6 - 15 */background: linear-gradient(to right, rgba(0, 0, 255, 1), rgba(0, 0, 255, 0)); /* 标准语法 */
}
/style
/head
bodydiv classgradient-box/div/body
/html这段代码会创建一个全宽的盒子高度为200像素并且有从蓝色逐渐变为透明的水平线性渐变背景。如果你把这段代码放入你的HTML文件并打开它你应该能够看到从左到右的蓝色至透明的线性渐变效果。
此外你还可以混合不同透明度的颜色节点以创造出更加复杂和丰富的视觉效果。例如你可以创建一个三色渐变其中中间颜色部分透明
background: linear-gradient(to right, rgba(255, 0, 0, 1), /* 红色完全不透明 */rgba(0, 255, 0, 0.5), /* 绿色半透明 */rgba(0, 0, 255, 1) /* 蓝色完全不透明 */
);这样你就可以创建出更有趣的渐变效果适用于不同的设计需求。
重复的线性渐变
CSS3 提供了 repeating-linear-gradient 函数它允许你创建一个重复的线性渐变背景。这意味着你可以定义一个短的渐变序列然后它会沿着指定的方向重复。
下面是一个简单的例子展示了如何创建一个从左到右的重复线性渐变该渐变从红色平滑过渡到蓝色再回到红色并且这个模式会不断重复
HTML:
div classgradient-box/divCSS:
.gradient-box {width: 100%;height: 200px;background: repeating-linear-gradient(to right, red, /* 起始颜色 */red 10px, /* 红色持续10px */blue 20px, /* 蓝色从10px开始到20px结束 */blue 30px /* 蓝色持续到30px */);
}在这个例子中
.gradient-box 是应用了重复线性渐变背景的一个 div 元素。width: 100%; 和 height: 200px; 定义了该 div 的尺寸你可以根据需要调整这些值。background: repeating-linear-gradient(...); 创建了一个从左到右的重复线性渐变背景其中每一段渐变从红色过渡到蓝色然后再回到红色每个完整的渐变周期为30px从红色到蓝色再到红色。
为了确保在各种浏览器上的兼容性你也可以添加带有前缀的版本尽管最新的浏览器通常不需要这些前缀。这里是一个完整的示例可以直接复制粘贴到你的 HTML 文件中查看效果
!DOCTYPE html
html
head
style
.gradient-box {width: 100%;height: 200px;background: -webkit-repeating-linear-gradient(left, red, red 10px, blue 20px, blue 30px); /* Safari 5.1 - 6.0 */background: -o-repeating-linear-gradient(left, red, red 10px, blue 20px, blue 30px); /* Opera 11.1 - 12.0 */background: -moz-repeating-linear-gradient(left, red, red 10px, blue 20px, blue 30px); /* Firefox 3.6 - 15 */background: repeating-linear-gradient(to right, red, red 10px, blue 20px, blue 30px); /* 标准语法 */
}
/style
/head
bodydiv classgradient-box/div/body
/html这段代码会创建一个全宽的盒子高度为200像素并且有从红色逐渐变为蓝色再变回红色的水平重复线性渐变背景。如果你把这段代码放入你的HTML文件并打开它你应该能够看到从左到右的红蓝相间的重复渐变效果。
你可以自由地改变颜色、位置和渐变的长度以达到你想要的效果。例如如果你希望渐变更细腻或更粗犷可以调整颜色停止点之间的距离。
CSS3 径向渐变
径向渐变Radial Gradients在 CSS3 中用于创建从一个中心点向外扩散的渐变效果。你可以通过 radial-gradient 函数来定义这种类型的渐变。下面我将给出两个不同的径向渐变示例以展示其多样性和灵活性。
示例 1: 简单的圆形径向渐变
这个例子会创建一个简单的圆形径向渐变颜色从中心的白色逐渐变为边缘的蓝色。我们使用了默认的圆形形状和大小并且没有指定位置默认是从中心开始。
HTML:
div classgradient-box simple-radial/divCSS:
.simple-radial {width: 200px;height: 200px;background: radial-gradient(circle, white, blue);
}在这个例子中
.simple-radial 是应用了径向渐变背景的一个 div 元素。width: 200px; 和 height: 200px; 定义了该 div 的尺寸。background: radial-gradient(circle, white, blue); 创建了一个从中心的白色到边缘的蓝色的圆形径向渐变。
示例 2: 椭圆径向渐变与自定义位置
这个例子展示了如何创建一个椭圆形的径向渐变并且可以指定渐变的起点位置。我们将创建一个从左上角靠近中心的位置开始颜色从浅黄色过渡到深橙色的渐变。
HTML:
div classgradient-box complex-radial/divCSS:
.complex-radial {width: 300px;height: 200px;background: radial-gradient(ellipse at 20% 20%, #ffeb3b, #ff9800);
}在这个例子中
.complex-radial 是应用了更复杂的径向渐变背景的一个 div 元素。width: 300px; 和 height: 200px; 定义了该 div 的尺寸创建了一个非正方形的区域因此默认情况下会产生椭圆形的渐变。background: radial-gradient(ellipse at 20% 20%, #ffeb3b, #ff9800); 创建了一个椭圆形的径向渐变起始点位于距离左侧和顶部各20%的位置颜色从浅黄色 (#ffeb3b) 渐变到深橙色 (#ff9800)。
为了确保在各种浏览器上的兼容性你也可以添加带有前缀的版本尽管最新的浏览器通常不需要这些前缀。这里是一个完整的 HTML 文件包含了上面两个示例
!DOCTYPE html
html
head
style
.gradient-box {margin: 20px;display: inline-block;
}.simple-radial {width: 200px;height: 200px;background: -webkit-radial-gradient(circle, white, blue); /* Safari 5.1 - 6.0 */background: -o-radial-gradient(circle, white, blue); /* Opera 11.1 - 12.0 */background: -moz-radial-gradient(circle, white, blue); /* Firefox 3.6 - 15 */background: radial-gradient(circle, white, blue); /* 标准语法 */
}.complex-radial {width: 300px;height: 200px;background: -webkit-radial-gradient(ellipse at 20% 20%, #ffeb3b, #ff9800); /* Safari 5.1 - 6.0 */background: -o-radial-gradient(ellipse at 20% 20%, #ffeb3b, #ff9800); /* Opera 11.1 - 12.0 */background: -moz-radial-gradient(ellipse at 20% 20%, #ffeb3b, #ff9800); /* Firefox 3.6 - 15 */background: radial-gradient(ellipse at 20% 20%, #ffeb3b, #ff9800); /* 标准语法 */
}
/style
/head
bodydiv classgradient-box simple-radial/div
div classgradient-box complex-radial/div/body
/html这段代码会创建两个相邻的盒子每个都有不同的径向渐变效果。第一个是简单的圆形渐变第二个是更复杂的椭圆形渐变并且具有自定义的起点位置。如果你把这段代码放入你的HTML文件并打开它你应该能够看到两种不同风格的径向渐变效果。
重复的径向渐变
CSS3 也支持重复的径向渐变这通过 repeating-radial-gradient 函数来实现。这个函数允许你定义一个短的径向渐变序列然后它会从中心向外重复该序列。
下面是一个简单的例子展示了如何创建一个重复的径向渐变。我们将创建一个从中心开始的渐变颜色从白色过渡到灰色再回到白色并且这个模式会不断重复形成一种类似圆环的效果。
HTML:
div classgradient-box/divCSS:
.gradient-box {width: 200px;height: 200px;background: repeating-radial-gradient(circle, white, /* 起始颜色 */white 10px, /* 白色持续10px */grey 10px, /* 灰色从10px开始 */grey 20px /* 灰色持续到20px */);
}在这个例子中
.gradient-box 是应用了重复径向渐变背景的一个 div 元素。width: 200px; 和 height: 200px; 定义了该 div 的尺寸你可以根据需要调整这些值。background: repeating-radial-gradient(...); 创建了一个圆形的重复径向渐变背景其中每一段渐变从白色过渡到灰色然后再回到白色每个完整的渐变周期为20px从白色到灰色再到白色。
为了确保在各种浏览器上的兼容性你也可以添加带有前缀的版本尽管最新的浏览器通常不需要这些前缀。这里是一个完整的示例可以直接复制粘贴到你的 HTML 文件中查看效果
!DOCTYPE html
html
head
style
.gradient-box {width: 200px;height: 200px;background: -webkit-repeating-radial-gradient(circle, white, white 10px, grey 10px, grey 20px); /* Safari 5.1 - 6.0 */background: -o-repeating-radial-gradient(circle, white, white 10px, grey 10px, grey 20px); /* Opera 11.1 - 12.0 */background: -moz-repeating-radial-gradient(circle, white, white 10px, grey 10px, grey 20px); /* Firefox 3.6 - 15 */background: repeating-radial-gradient(circle, white, white 10px, grey 10px, grey 20px); /* 标准语法 */
}
/style
/head
bodydiv classgradient-box/div/body
/html这段代码会创建一个200x200像素的盒子并且有从白色逐渐变为灰色再变回白色的圆形重复径向渐变背景。如果你把这段代码放入你的HTML文件并打开它你应该能够看到一个类似同心圆环的重复渐变效果。
你可以自由地改变颜色、位置和渐变的长度以达到你想要的效果。例如如果你希望渐变更细腻或更粗犷可以调整颜色停止点之间的距离。此外你还可以使用不同的形状如 ellipse和大小如 closest-side 或 farthest-corner以及自定义起点位置来创造更加独特的视觉效果。
