css前端切图教程,前端入门css

上篇整体介绍了css渐变的知识,本篇将着重介绍线性渐变(linear-gradient)。

线性 CSS 渐变 —— linear-gradient

我们在网页设计中最常见的 CSS 渐变类型是 linear-gradient()。之所以称为“线性”,是因为颜色从左到右、从上到下或以您在某个方向上选择的任何角度渐变。

语法:

background:linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* } 或 background-image:linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* }

参数说明

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

<stop > = <color> [ <length> | <percentage>]:

  • <color>:指渐变得起止颜色。
  • <length>:用长度值指定起止色位置,不允许负值。
  • <percentage>:用百分比指定起止色位置。
最基础的渐变:

让我们从最基本的例子开始,一个从上到下的CSS 渐变:

.gradient { background-image: linear-gradient(#ff8a00, #e52e71); }

效果如下:

css前端切图教程,前端入门css(1)

从上到下的CSS 渐变

上面例子中,我们没有设置角度,默认情况下渐变方向是从上到下,等同于以下的写法:

/* 使用关键字 */ background-image: linear-gradient(to bottom, #ff8a00, #e52e71); /* 使用角度值*/ background-image: linear-gradient(180deg, #ff8a00, #e52e71);

改变渐变方向:

为了使 CSS 渐变从左到右,我们在函数的第一个参数中使用 to right 关键字表示方向,如下示例:

.gradient { background-image: linear-gradient( to right, #ff8a00, #e52e71 ); }

效果显示:

css前端切图教程,前端入门css(2)

从左到右

对角渐变:

上面展示了使用to 语法使渐变从左到右,除此之外,我们还可以使用to 语法从一个角到另一个角渐变,如下示例:

.gradient { background-image: linear-gradient( to top right, #ff8a00, #e52e71 ); }

显示效果:

css前端切图教程,前端入门css(3)

从左下角开始到右上角

上面渐变使用 to top right ,如果使用 to right top 什么效果?结果你会发现一样。

使用角度渐变:

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

使用角度值,能够控制更多的渐变方向,默认角度是180deg。

css前端切图教程,前端入门css(4)

如下示例,创建一个45度的渐变:

.gradient { background-image: linear-gradient( 45deg, #00ff00, #e52e71 ); }

显示效果:

css前端切图教程,前端入门css(5)

45度渐变

上面的效果等同于,to top right的效果。

使用多颜色渐变

我们不仅限于两种颜色!事实上,我们可以使用逗号分隔颜色来创建尽可能多的颜色渐变。比如这里有四个颜色:

.gradient { background-image: linear-gradient( to right, red, #f06d06, rgb(255, 255, 0), green ); }

显示效果:

css前端切图教程,前端入门css(6)

从左到右有四种颜色

控制颜色的结束位置

css 渐变默认会自动计算每种过渡颜色的位置,我们也可以指定某种颜色的结束位置,如下示例:

.multicolor-linear { background: linear-gradient(to right, red 28px, green 77%, blue); }

css前端切图教程,前端入门css(7)

上图中所示,从左到右,红色在28px位置结束,绿色从28px开始到77%结束,蓝色从77%开始到100%位置结束。结束位置可以使用任何表示大写的单位值或百分比。

创建实线

在两种颜色之间创建一条硬线,即创建一个条纹而不是逐渐过渡,可以将相邻的颜色停止设置为相同的位置。如下示例:

.gradient { background: linear-gradient(to bottom left, red 50%, blue 50%); }

css前端切图教程,前端入门css(8)

改变渐变中心点

默认情况下,渐变会平滑地从一种颜色过渡到另一种颜色。

你可以通过设置一个值来将渐变的中心点移动到指定位置。 在如下示例中,我们将渐变的中心点由 50% 设为 10%。

/*默认中心点在50%渐变:*/ .default-linear { background: linear-gradient(blue, pink); } /*中心点在10%渐变:*/ .color-hint { background: linear-gradient(blue, 10%, pink); }

如下效果:

css前端切图教程,前端入门css(9)

创建色带和条纹

要在渐变中包含一个实心的非过渡颜色区域,请包含颜色起止点的两个位置。

颜色起止点可以有两个位置,这相当于两个连续颜色在不同位置具有相同的颜色起止点。

颜色将在第一个颜色起止点时达到完全饱和,保持该饱和度到第二个颜色起止点,并通过相邻颜色起止点的第一个位置过渡到相邻颜色起止点的颜色。

色带:

.multiposition-stops { background: linear-gradient(to left, lime 20%, red 30%, red 45%, cyan 55%, cyan 70%, yellow 80% ); } 或 .multiposition-stops { background: linear-gradient(to left, lime 20%, red 30% 45%, cyan 55% 70%, yellow 80% ); }

css前端切图教程,前端入门css(10)

条纹:

.multiposition-stop2 { background: linear-gradient(to left, lime 25%, red 25%, red 50%, cyan 50%, cyan 75%, yellow 75% ); } 或 .multiposition-stop2 { background: linear-gradient(to left, lime 25%, red 25% 50%, cyan 50% 75%, yellow 75% ); }

css前端切图教程,前端入门css(11)

最后

到此已经介绍了线性渐变的使用方法,下面将会继续介绍其它渐变的使用方法,你可以关注我,继续学习其它渐变知识。

其它相关文章:

  • css 线性渐变
  • css 径向渐变
  • css 圆锥渐变
  • css 重复渐变

参考资料:

https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Images/Using_CSS_gradients

https://css-tricks.com/a-complete-guide-to-css-gradients/

,

免责声明:本文仅代表文章作者的个人观点,与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺,请读者仅作参考,并自行核实相关内容。文章投诉邮箱:anhduc.ph@yahoo.com

    分享
    投诉
    首页