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 条评论
登录 后参与评论

相关文章

来自专栏程序员的诗和远方

一个比想象中更骚气的圆-svg实现

之前写了一篇Canvas画图-一个比想象中更骚气的圆(渐变圆环),其实SVG也可以实现类似的效果,而且两者api惊人的相似。 关于SVG SVG是一种矢量...

3867
来自专栏Nian糕的私人厨房

CSS 布局_2 Flex弹性盒

弹性盒,是一种布局方式,当页面需要适应不同的屏幕大小以及设备类型时,它依然能确保元素拥有更恰当的排布行为,弹性盒属于 CSS 3 部分,IE9 以下不支持,现代...

1074
来自专栏程序员的诗和远方

Canvas画图-一个比想象中更骚气的圆(渐变圆环)

之前介绍了Canvas画图基础,这篇介绍一下画一个带渐变效果的圆。 一个渐变的圆环 渐变色应用广泛,和圆环结合做进度条非常酷,今天我们就来画一个这样的圆环...

6527
来自专栏一个小程序员的成长笔记

CSS深入理解学习笔记之border

1、border-width   border-width为何不支持百分比:语义和使用场景决定的,现实中各种边框本身的概念就不存在百分比的使用方法。   bor...

3139
来自专栏程序你好

CSS盒子(Box)模型入门

无论您是CSS的新手还是经验丰富的老手,了解和理解box模型都很重要。让我们更好地了解它。

1352
来自专栏前端说吧

CSS3-canvas绘制线性渐变

2805
来自专栏Coco的专栏

奇妙的 CSS shapes(CSS图形)

2185
来自专栏Alice

绘图quartz之渐变

实现线性渐变   径向渐变 自己新建的view中有一个drawRect:(cgrect)rect方法 在这个方法里 可以通过画图 将内容显示在画板上(即最下边的...

1805
来自专栏Android知识点总结

开源计划之--Android绘图库--LogicCanvas

1182
来自专栏柠檬先生

css3 gradient 渐变

分为linear-gradient(线性渐变)和radial-gradient(径向渐变)。 1.线性渐变在Mozilla 下应用   语法:-moz-...

2016

扫码关注云+社区