css-css3渐变 | 易学教程

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

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

css3线性渐变

语法：

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

从上到下（默认）：

#grad {
　　background: -webkit-linear-gradient(red, blue);/* Safari 5.1 - 6.0 */
　　background: -o-linear-gradient(red, blue);/* Opera 11.1 - 12.0 */
　　background: -moz-linear-gradient(red, blue);/* Firefox 3.6 - 15 */
　　background: linear-gradient(red, blue); /* 标准的语法 */
}

从左到右：

#grad {
　　background: -webkit-linear-gradient(left,red, blue);/* Safari 5.1 - 6.0 */
　　background: -o-linear-gradient(right,red, blue);/* Opera 11.1 - 12.0 */
　　background: -moz-linear-gradient(right,red, blue);/* Firefox 3.6 - 15 */
　　background: linear-gradient(to right,red, blue); /* 标准的语法 */
}

对角（左上角 - 右下角）：

#grad {
　　background: -webkit-linear-gradient(left top,red, blue);/* Safari 5.1 - 6.0 */
　　background: -o-linear-gradient(bottom right ,red, blue);/* Opera 11.1 - 12.0 */
　　background: -moz-linear-gradient(bottom right,red, blue);/* Firefox 3.6 - 15 */
　　background: linear-gradient(to bottom right,red, blue); /* 标准的语法 */
}

使用角度

语法：

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

角度是指水平线和渐变线之间的角度，逆时针方向计算。0deg 将创建一个从下到上的渐变，90deg 将创建一个从左到右的渐变。

使用透明度

使用 rgba() 函数来定义颜色结点。

重复的线性渐变

控制颜色百分比

#grad {
　　background: -webkit-linear-gradient(red 10%, blue 20%);/* Safari 5.1 - 6.0 */
　　background: -o-linear-gradient(red 10%, blue 20%);/* Opera 11.1 - 12.0 */
　　background: -moz-linear-gradient(red 10%, blue 20%);/* Firefox 3.6 - 15 */
　　background: linear-gradient(red 10%, blue 20%); /* 标准的语法 */
}

CSS3 径向渐变

语法：

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

颜色结点均匀分布的径向渐变：

#grad {
　　background: -webkit-radial-gradient(red, green, blue); /* Safari 5.1 - 6.0 */
　　background: -o-radial-gradient(red, green, blue); /* Opera 11.6 - 12.0 */
　　background: -moz-radial-gradient(red, green, blue); /* Firefox 3.6 - 15 */
　　background: radial-gradient(red, green, blue); /* 标准的语法 */
}

颜色结点不均匀分布的径向渐变：

#grad {
　　background: -webkit-radial-gradient(red 5%, green 15%, blue 60%); /* Safari 5.1 - 6.0 */
　　background: -o-radial-gradient(red 5%, green 15%, blue 60%); /* Opera 11.6 - 12.0 */
　　background: -moz-radial-gradient(red 5%, green 15%, blue 60%); /* Firefox 3.6 - 15 */
　　background: radial-gradient(red 5%, green 15%, blue 60%); /* 标准的语法 */
}

shape 参数定义了形状。它可以是值 circle 或 ellipse。其中，circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse。

size 参数定义了渐变的大小。它可以是以下四个值：

closest-side
farthest-side
closest-corner
farthest-corner

重复的径向渐变

repeating-radial-gradient() 函数用于重复径向渐变：

一个重复的径向渐变：

#grad {
　　/* Safari 5.1 - 6.0 */
　　background: -webkit-repeating-radial-gradient(red, yellow 10%, green 15%);
　　/* Opera 11.6 - 12.0 */
　　background: -o-repeating-radial-gradient(red, yellow 10%, green 15%);
　　/* Firefox 3.6 - 15 */
　　background: -moz-repeating-radial-gradient(red, yellow 10%, green 15%);
　　/* 标准的语法 */
　　background: repeating-radial-gradient(red, yellow 10%, green 15%);
}

来源：https://www.cnblogs.com/starnoone/p/9459868.html

标签

background

linear-gradient

safari