首页 抖音真文案网文章正文

颜色渐变(颜色渐变色卡)

抖音真文案网 2022年07月08日 00:54 132 admin

HTML5学堂（码匠）：渐变背景是一直在页面中常见的元素之一，但是在之前所有的渐变背景都是通过设计师通过图形软件设计出来的背景图。其实这种方法比较麻烦，需要设计、切图，而且还影响页面性能。如今CSS3渐变被收入W3C标准，同时也得到了众多浏览器的兼容。让前端工作者直接受益。

本文主要内容：

线性渐变概括

线性渐变语法与参数

线性渐变的基本用法

多色线性渐变

1.线性渐变概括

如果有使用过PS的各位想必对PS的渐变操作有所了解，渐变由两种颜色或多种颜色之间的平滑过渡，如PS中的渐变操作：

在线性渐变的过程中，颜色会沿着任意轴过渡，不管从顶部到底部还是从左到右，甚至某个角度开始，都可以实现。最早支持线性渐变的是以-webkit-为前缀的浏览器，后面才在众多浏览器上普及，但是那时候众多浏览器并没有统一的标准，用法差异很大，如今，所有的现代浏览器都支持W3C给出的线性属性的标准语法。

2.线性渐变语法与参数

线性渐变的语法较之其它的CSS3语法相对复杂的多，本文以W3C为标准的语法介绍CSS3的线性渐变。

标准线性渐变语法

= linear-gradient([ [| to] ,]?[,]+)

参数说明：

= [deg]

= [left | right] || [top | bottom]

=[|]?

第一个参数指定了渐变的方向，同时决定了渐变颜色的停止位置。这个参数值可以省略，当省略不写的时候其取值为“to bottom”。

下述值用来表示渐变的方向，可以使用角度或者关键字来设置：

angle：用角度值指定渐变的方向（或角度）。

to left：设置渐变为从右到左。相当于: 270deg

to right：设置渐变从左到右。相当于: 90deg

to top：设置渐变从下到上。相当于: 0deg

to bottom：设置渐变从上到下。相当于: 180deg。这是默认值，等同于留空不写。

第二个参数：

color-stop 用于指定渐变的起止颜色。

color：指定颜色。

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

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

3.线性渐变的基本用法

3.1 从底部向顶部渐变

制作从底部到顶部直线渐变最简单的方法直接使用“to top”关键词。表示第一颜色向第二颜色渐变,下同。实现类似于“to top”效果还可以使用角度值“0deg”、“360deg”和“-360deg”。

.div {

width: 400px;

height: 200px;

border: 1px solid #000;

margin-bottom: 10px;

}

.gradient {

background: linear-gradient(to top,#39f,#fff);

}

效果如下：

3.2从右向左渐变

“to left”关键词实现了从右向左颜色渐变，“to left”实现的效果也可以使用角值“-90deg”和“270deg”；

.gradient {

background: linear-gradient(to left,#39f,#fff);

}

颜色渐变(颜色渐变色卡)

效果如下：

3.3 从左下角到右上角

“to top right”关键词实现左下角到右上角的线性渐变。也就是第一颜色从左下角向右上角第二颜色渐变。

background: linear-gradient(to top right,#39f,#fff);

效果如下：

颜色渐变(颜色渐变色卡)

3.4 色标

这个例子指定三个色标:

background: linear-gradient(to bottom, blue, white 80%, green);

需要注意的是第一个和最后一个色标并没有指定一个位置; 由于这个原因， 位置值0％和100%将分别自动的分配给第一个和最后一个色标 。中间的色标指定一个80%的位置, 把剩下的部分留给底部。

效果如下：

4.多色线性渐变

前面向大家演示的效果仅是一些简单的线性渐变（两色渐变），其实在实际中，渐变不仅仅是只有两种颜色，会有多色。接下来，我们一起来看一个从右向左的五彩渐变。

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

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

由代码可知，我们只要设置好了渐变位置，剩下的就可以随意设置颜色了。

效果如下：

小结

在本篇文章的案例中，效果的位置并不是一成不变的，可以在angle中设置看到更多的渐变效果。同时在实际开发中，为了避免遇到的兼容问题，大家在开发中最好加上内核前缀避免兼容问题。

相关文章

发表评论

陕ICP备2022006270号-1 网站地图 抖音真文案网