CSS3颜色渐变应用方法总结(下篇)

CSS3颜色渐变应用方法总结

在上一篇中波波主要分享了CSS3颜色渐变的相关语法,本篇波波将为大家分享CSS3颜色渐变中的线性渐变与径向渐变以及浏览器的兼容性。

线性渐变的语法:

对象选择器 {background:-浏览器前缀-linear-gradient( 起点方向,起点颜色,终点颜色);}

径向渐变的语法:

对象选择器 {background:-浏览器前缀-radial-gradient( 起点方向,形状,大小,起点颜色,终点颜色);}

渐变的兼容方法:

1、Firefox:

Firefox浏览器兼容

2、Safari , Chrome:

Safari浏览器兼容

Chrome浏览器兼容

3、Opera 11.10+

Opera 11.10+

4、IE

IE

CSS3线性颜色渐变实例:

使用语法

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

1、线性渐变从上到下(默认)

下面的实例演示了从顶部开始的线性渐变。起点是红色,慢慢过渡到蓝色。

  1. #grad {
  2.   background: -webkit-linear-gradient(redblue); /* Safari 5.1 - 6.0 */
  3.   background: -o-linear-gradient(redblue); /* Opera 11.1 - 12.0 */
  4.   background: -moz-linear-gradient(redblue); /* Firefox 3.6 - 15 */
  5.   background: linear-gradient(redblue); /* 标准的语法 */
  6. }

2、线性渐变从左到右

下面的实例演示了从左边开始的线性渐变。起点是红色,慢慢过渡到蓝色。

  1. #grad {
  2.   background: -webkit-linear-gradient(leftred , blue); /* Safari 5.1 - 6.0 */
  3.   background: -o-linear-gradient(rightrightredblue); /* Opera 11.1 - 12.0 */
  4.   background: -moz-linear-gradient(rightrightredblue); /* Firefox 3.6 - 15 */
  5.   background: linear-gradient(to rightrightred , blue); /* 标准的语法 */
  6. }

3、线性渐变 - 对角

你可以通过指定水平和垂直的起始位置来制作一个对角渐变。

下面的实例演示了从左上角开始(到右下角)的线性渐变。起点是红色,慢慢过渡到蓝色。

  1. #grad {
  2.   background: -webkit-linear-gradient(left topred , blue); /* Safari 5.1 - 6.0 */
  3.   background: -o-linear-gradient(bottombottom rightrightredblue); /* Opera 11.1 - 12.0 */
  4.   background: -moz-linear-gradient(bottombottom rightrightredblue); /* Firefox 3.6 - 15 */
  5.   background: linear-gradient(to bottombottom rightrightred , blue); /* 标准的语法 */
  6. }

4、线性渐变 - 角度

如果你想要在渐变的方向上做更多的控制,你可以定义一个角度,而不用预定义方向(to bottom、to top、to right、to left、to bottom right,等等)。

css3角度渐变

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

使用语法:

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

但是,请注意很多浏览器(Chrome,Safari,fiefox等)的使用了旧的标准,即 0deg 将创建一个从下到上的渐变,90deg 将创建一个从左到右的渐变。换算公式 90 - x = y 其中 x 为标准角度,y为非标准角度。

下面的实例演示了如何在线性渐变上使用角度:

  1. #grad {
  2.   background: -webkit-linear-gradient(180deg, redblue); /* Safari 5.1 - 6.0 */
  3.   background: -o-linear-gradient(180deg, redblue); /* Opera 11.1 - 12.0 */
  4.   background: -moz-linear-gradient(180deg, redblue); /* Firefox 3.6 - 15 */
  5.   background: linear-gradient(180deg, redblue); /* 标准的语法 */
  6. }

5、线性渐变 - 使用多个颜色结点

带有多个颜色结点的从上到下的线性渐变。

  1. #grad {
  2.   background: -webkit-linear-gradient(redgreenblue); /* Safari 5.1 - 6.0 */
  3.   background: -o-linear-gradient(redgreenblue); /* Opera 11.1 - 12.0 */
  4.   background: -moz-linear-gradient(redgreenblue); /* Firefox 3.6 - 15 */
  5.   background: linear-gradient(redgreenblue); /* 标准的语法 */
  6. }

6、线性渐变 - 使用透明度(Transparency)

CSS3 渐变也支持透明度(transparency),可用于创建减弱变淡的效果。

为了添加透明度,我们使用 rgba() 函数来定义颜色结点。rgba() 函数中的最后一个参数可以是从 0 到 1 的值,它定义了颜色的透明度:0 表示完全透明,1 表示完全不透明。

  1. #grad {
  2.   background: -webkit-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1)); /* Safari 5.1 - 6 */
  3.   background: -o-linear-gradient(rightright,rgba(255,0,0,0),rgba(255,0,0,1)); /* Opera 11.1 - 12*/
  4.   background: -moz-linear-gradient(rightright,rgba(255,0,0,0),rgba(255,0,0,1)); /* Firefox 3.6 - 15*/
  5.   background: linear-gradient(to rightright, rgba(255,0,0,0), rgba(255,0,0,1)); /* 标准的语法 */
  6. }

7、线性渐变 - 重复的线性渐变

repeating-linear-gradient() 函数用于重复线性渐变。

  1. #grad {
  2.   /* Safari 5.1 - 6.0 */
  3.   background: -webkit-repeating-linear-gradient(redyellow 10%, green 20%);
  4.   /* Opera 11.1 - 12.0 */
  5.   background: -o-repeating-linear-gradient(redyellow 10%, green 20%);
  6.   /* Firefox 3.6 - 15 */
  7.   background: -moz-repeating-linear-gradient(redyellow 10%, green 20%);
  8.   /* 标准的语法 */
  9.   background: repeating-linear-gradient(redyellow 10%, green 20%);
  10. }
波波
你想把广告放到这里吗?

发表评论

您必须 登录 才能发表留言!