css 渐变w3,css3 Gradient渐变

CSS3 Gradient分为linear-gradient(线性渐变)和radial-gradient(径向渐变)。

首先,我们先来了解一下目前的几种现代浏览器的内核,主流的主要有Mozilla(Gecko)(熟悉的有Firefox,Flock等浏览器)、WebKit(熟悉的有Safari、Chrome等浏览器)、Opera(presto)(Opera浏览器)、Trident(IE浏览器)。

接下来,我们就来详解Gradient渐变的具体用法。

一、linear-gradient(线性渐变)

1.1 语法

linear-gradient( [ || ,]? , [, ]* } //标准写法

-webkit-linear-gradient( [ || ,]? , [, ]* } //在WebKit浏览器下的应用

-moz-linear-gradient( [ || ,]? , [, ]* ) //在Mozilla浏览器下的应用

-o-linear-gradient([ || ,]? , [, ]); //在Opera浏览器下的应用

1.2 参数解析

参数:

是角度,单位为deg

point : 第一个参数表示线性渐变的方向,可用关键字top、left、bottom、right,to top是从上到下、to left是从左到右,如果定义成to left top,那就是从左上角到右下角(to可省略)。

= [ | ]:

:指渐变的起止颜色。

:用长度值指定起止色位置,不允许负值。

:用百分比指定起止色位置。

例子:

background:linear-gradient(left top,yellow,blue);

background:-webkit-linear-gradient(left top,yellow,blue);

background:-moz-linear-gradient(left top,yellow,blue);

background:-o-linear-gradient(left top,yellow,blue);

6128233c9b6e73b1aecfc0aeff8892f9.png

当然,你还可以在它们之间插入更多的参数,表示多种颜色的渐变。

例子:background: linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);

background: -webkit-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);

background: -moz-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);

background: -o-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);

3425d5499140631a4e9cc2fd1518dee8.png

1.3 使用角度

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

68cd707e18bbe42281559caf5bb72a20.png

注意:有部分浏览器使用了旧的标准,即 0deg 将创建一个从左到右的渐变,90deg 将创建一个从下到上的渐变。换算公式 90 - x = y 其中 x 为标准角度,y为非标准角度。

1.4 重复的线性渐变background: -webkit-repeating-linear-gradient(red, yellow 10%, green 15%);

background: -o-repeating-linear-gradient(red, yellow 10%, green 15%);

background: -moz-repeating-linear-gradient(red, yellow 10%, green 15%);

background: repeating-linear-gradient(red, yellow 10%, green 15%);

1d4d71d31e84512b62456d95476d48a5.png

二、径向渐变(radial-gradient)

径向渐变由它的中心定义。

为了创建一个径向渐变,你也必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。

同时,你也可以指定渐变的中心、形状(原型或椭圆形)、大小。默认情况下,渐变的中心是 center(表示在中心点),渐变的形状是 ellipse(表示椭圆形),渐变的大小是 farthest-corner(表示到最远的角落)。

语法-moz-radial-gradient([ || ,]? [] [,]? , [, ]*);

-webkit-radial-gradient([ || ,]? [] [,]? , [, ]*);

-o-radial-gradient([ || ,]? [] [,]? , [, ]*);

radial-gradient([ || ,]? [] [,]? , [, ]*);

参数说明:

:用来定义径向渐变的圆心位置,类似background-position,默认为center。可用关键字top、left、bottom、right、center、、。

是角度,单位为deg

:定义径向渐变的形状,有两个可选值“circle”和“ellipse”

:用来确定径向渐变的结束形状大小,默认值为“farthest-corner”,其他值:

closest-side:指定径向渐变的半径长度为从圆心到离圆心最近的边;

closest-corner:指定径向渐变的半径长度为从圆心到离圆心最近的角;

farthest-side:指定径向渐变的半径长度为从圆心到离圆心最远的边;

farthest-corner:指定径向渐变的半径长度为从圆心到离圆心最远的角;

= [ | ]:

:指渐变的起止颜色。

:用长度值指定起止色位置,不允许负值。

:用百分比指定起止色位置。

例子:颜色结点均匀分布的径向渐变background: -webkit-radial-gradient(white, green, orange);

background: -o-radial-gradient(white, green, orange);

background: -moz-radial-gradient(white, green, orange);

background: radial-gradient(white, green, orange);

41ede0264d48d70641514d8812e830a9.png

例子:结点不均匀的径向渐变background: -webkit-radial-gradient(white 2%, green 10%, orange 50%);

background: -o-radial-gradient(white 2%, green 10%, orange 50%);

background: -moz-radial-gradient(white 2%, green 10%, orange 50%);

background: radial-gradient(white 2%, green 10%, orange 50%);

0ef2b45df3519c3b1f003b04fc8913ae.png

例子:定义形状

shape 参数定义了形状。它可以是值 circle 或 ellipse。其中,circle 表示圆形,ellipse 表示椭圆形。默认值是 ellipse。background: -webkit-radial-gradient(circle,white, green, orange);

background: -o-radial-gradient(circle,white, green, orange);

background: -moz-radial-gradient(circle,white, green, orange);

background: radial-gradient(circle,white, green, orange);

0ef2b45df3519c3b1f003b04fc8913ae.png

重复的径向渐变background: -webkit-repeating-radial-gradient(red, yellow 10%, green 15%);

background: -o-repeating-radial-gradient(red, yellow 10%, green 15%);

background: -moz-repeating-radial-gradient(red, yellow 10%, green 15%);

background: repeating-radial-gradient(red, yellow 10%, green 15%);

mayuan_radial_repeat.png

如有错误,欢迎指正!

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值