CSS渐变gradient CSSgradient|CSS2

本文概述

为什么使用CSS渐变
1）CSS线性渐变
（i）CSS线性渐变：（从上到下）
（ii）CSS线性渐变：（从左到右）
（iii）CSS线性渐变：（对角线）
2）CSS径向渐变
（i）CSS径向渐变：（均匀间隔的色标）
（ii）径向渐变：（不同间距的色标）
支持的浏览器

CSS渐变用于显示两种或多种指定颜色的平滑过渡。

为什么使用CSS渐变这些是使用CSS渐变的以下原因。

你不必使用图像来显示过渡效果。
下载时间和带宽使用量也可以减少。
缩放时, 它可以为元素提供更好的外观, 因为渐变是由浏览器生成的。

CSS3中有两种类型的渐变。

线性渐变
径向渐变

1）CSS线性渐变CSS3线性渐变向上/向下/向左/向右倾斜。要创建CSS3线性渐变, 必须定义两个或多个色标。色标是用于创建平滑过渡的颜色。起点和方向也可以与渐变效果一起添加。

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

（i）CSS线性渐变：（从上到下）“从上到下的线性渐变”是默认的线性渐变。让我们以从顶部开始的线性渐变为例。它从红色开始, 然后过渡到绿色。

< !DOCTYPE html> < html> < head> < style> #grad1 { height: 100px; background: -webkit-linear-gradient(red, green); /* For Safari 5.1 to 6.0 */ background: -o-linear-gradient(red, green); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(red, green); /* For Firefox 3.6 to 15 */ background: linear-gradient(red, green); /* Standard syntax (must be last) */ } < /style> < /head> < body> < h3> Linear Gradient - Top to Bottom< /h3> < p> This linear gradient starts at the top. It starts red, transitioning to green:< /p> < div id="grad1"> < /div> < /body> < /html>

输出：
线性渐变-从上到下
此线性渐变从顶部开始。它从红色开始, 过渡到绿色：
（ii）CSS线性渐变：（从左到右）以下示例显示了从左到右的线性渐变。它从左侧开始为红色, 然后过渡为绿色。

< !DOCTYPE html> < html> < head> < style> #grad1 { height: 100px; background: -webkit-linear-gradient(left, red, green); /* For Safari 5.1 to 6.0 */ background: -o-linear-gradient(right, red, green); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(right, red, green); /* For Firefox 3.6 to 15 */ background: linear-gradient(to right, red , green); /* Standard syntax (must be last) */ } < /style> < /head> < body> < h3> Linear Gradient - Left to Right< /h3> < p> This linear gradient starts at the left. It starts red, transitioning to green:< /p> < div id="grad1"> < /div> < /body> < /html>

输出：
线性渐变-从左到右
该线性梯度从左侧开始。它从红色开始, 过渡到绿色：
（iii）CSS线性渐变：（对角线）如果同时指定水平和垂直起始位置, 则可以使线性渐变对角线。

< !DOCTYPE html> < html> < head> < style> #grad1 { height: 100px; background: -webkit-linear-gradient(left top, red , green); /* For Safari 5.1 to 6.0 */ background: -o-linear-gradient(bottom right, red, green); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(bottom right, red, green); /* For Firefox 3.6 to 15 */ background: linear-gradient(to bottom right, red , green); /* Standard syntax (must be last) */ } < /style> < /head> < body> < h3> Linear Gradient - Diagonal< /h3> < p> This linear gradient starts at top left. It starts red, transitioning to green:< /p> < div id="grad1"> < /div> < /body> < /html>

输出：
线性渐变-对角线
该线性梯度从左上方开始。它从红色开始, 过渡到绿色：
2）CSS径向渐变你必须至少定义两个色标才能创建径向渐变。它由其中心定义。

background: radial-gradient(shape size at position, start-color, ..., last-color);

（i）CSS径向渐变：（均匀间隔的色标）默认情况下, 均匀间隔的色标是径向渐变。默认情况下, 其形状为月食, 尺寸为最远, 位置为中心。

< !DOCTYPE html> < html> < head> < style> #grad1 { height: 150px; width: 200px; background: -webkit-radial-gradient(blue, green, red); /* Safari 5.1 to 6.0 */ background: -o-radial-gradient(blue, green, red); /* For Opera 11.6 to 12.0 */ background: -moz-radial-gradient(blue, green, red); /* For Firefox 3.6 to 15 */ background: radial-gradient(blue, green, red); /* Standard syntax (must be last) */ } < /style> < /head> < body> < h3> Radial Gradient - Evenly Spaced Color Stops< /h3> < div id="grad1"> < /div> < /body> < /html>

输出：
径向渐变-均匀分布的色标
（ii）径向渐变：（不同间距的色标）

< !DOCTYPE html> < html> < head> < style> #grad1 { height: 150px; width: 200px; background: -webkit-radial-gradient(blue 5%, green 15%, red 60%); /* Safari 5.1 to 6.0 */ background: -o-radial-gradient(blue 5%, green 15%, red 60%); /* For Opera 11.6 to 12.0 */ background: -moz-radial-gradient(blue 5%, green 15%, red 60%); /* For Firefox 3.6 to 15 */ background: radial-gradient(blue 5%, green 15%, red 60%); /* Standard syntax (must be last) */ } < /style> < /head> < body> < h3> Radial Gradient - Differently Spaced Color Stops< /h3> < div id="grad1"> < /div> < /body> < /html>

输出：
径向渐变-不同间距的色标
支持的浏览器【CSS渐变gradient】该表指定了完全支持渐变属性的第一个浏览器版本。

属性	铬	火狐	即	歌剧	苹果浏览器
linear-gradient	26.0 10.0-webkit-	16.0 3.6-moz-	10.0	12.1 11.1-o-	6.1 5.1-webkit-
radial-gradient	26.0 10.0-webkit-	16.0 3.6-moz-	10.0	12.1 11.1-o-	6.1 5.1-webkit-
repeating-linear-gradient	26.0 10.0-webkit-	16.0 3.6-moz-	10.0	12.1 11.1-o-	6.1 5.1-webkit-
repeating-radial-gradient	26.0 10.0-webkit-	16.0 3.6-moz-	10.0	12.1 11.1-o-	6.1 5.1-webkit-