CSS3渐变,就是这么玩

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

本文主要内容:

1.线性渐变概括

2.线性渐变语法与参数

3.线性渐变的基本用法

4.多色线性渐变

1.线性渐变概括

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

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

2.线性渐变语法与参数

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

标准线性渐变语法

<linear-gradient> = linear-gradient([ [ <angle> | to <side-or-corner> ] ,]? <color-stop>[, <color-stop>]+)


参数说明:
<angle> = [deg]

<side-or-corner> = [left | right] || [top | bottom]
<color-stop> = <color> [ <length> | <percentage> ]?

第一个参数指定了渐变的方向,同时决定了渐变颜色的停止位置。这个参数值可以省略,当省略不写的时候其取值为“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中设置看到更多的渐变效果。同时在实际开发中,为了避免遇到的兼容问题,大家在开发中最好加上内核前缀避免兼容问题。

原文发布于微信公众号 - HTML5学堂(h5course-com)

原文发表时间:2017-01-09

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏cnblogs

Css3新特性应用之形状

一、自适应椭圆 * border-radius特性:     * 可以单独指定水平和垂直半径,并且值可以是百分比,用/(斜杠)分隔这两个值即可(可以实现自适应宽...

1709
来自专栏web编程技术分享

三分钟学会用 js + css3 打造酷炫3D相册

3315
来自专栏Coco的专栏

【CSS进阶】CSS 颜色体系详解

1765
来自专栏HTML5学堂

谁说不能用代码实现酷炫的文字特效?

HTML5学堂:文本阴影是一个很神奇的属性,在它还没有出现之前,网页中对于阴影的制作一般都是采用Photoshop做成图片来实现的。而在CSS3流行的当下,我们...

2663
来自专栏Java后端技术

HTML标记语法之图片Img元素

631
来自专栏林德熙的博客

WPF 在 DrawingContext 的 push 如何使用

如果在一个 DrawingContext 画出一个 DrawingVisual ,如何修改这个 DrawingVisual 的大小,对他进行变换?

341
来自专栏Coco的专栏

【CSS进阶】box-shadow 与 filter:drop-shadow 详解及奇技淫巧

1685
来自专栏Danny的专栏

前端基础——CSS盒子模型

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/huyuyang6688/article/...

861
来自专栏静晴轩

CSS征途之Background点滴

CSS虽算不上编程语言,确是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言,CSS能够对网页中的对象的位置排版进行像素级的精确控...

3224
来自专栏林德熙的博客

WPF 解决 ViewBox 不显示线的问题

ViewBox 是一个好用的东西,但是在他缩小的时候,可能有一些线无法显示。 现在公司项目就是做一个类似 ppt 的软件,所以需要使用缩略图,而对于矩形形状,在...

531

扫码关注云+社区