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

相关文章

来自专栏蜉蝣禅修之道

关于Havel算法判断度数序列能否构成简单图的思考

1572
来自专栏C语言及其他语言

[每日一题]斐波那契数列

问题 1131: 【C语言训练】斐波纳契数列 题目描述 斐波纳契数列 1,1,2,3,5,8,13,21,34,55,89……这个数列则称为“斐波纳契数列”...

26410
来自专栏柠檬先生

css3 gradient 渐变

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

1736
来自专栏calmound

动态规划集合

动态规划,少说也做了,30 40道了但是感觉还是没有入门,接下来一星期将重新做动态规划,hdu入门的,uva入门的,外加poj的,把动态规划都重新学一下 01背...

2946
来自专栏知无涯

CSS实现兼容性的渐变背景(gradient)效果兼容众多浏览器

25512
来自专栏阮一峰的网络日志

制作CSS气泡框

这种方法的优点是所有浏览器都支持,缺点是比较麻烦,必须制作专门的图片,增加多余的标签,代码的灵活性较小。

352
来自专栏抠抠空间

Python的编码问题(一)

一、什么是编码   可以说,计算机是一个即聪明又笨蛋的家伙。说它聪明,是因为他可以做很多事情,它的强大无需多说,大家应该都有所了解以及感受。但是为什么说它又是个...

3567
来自专栏cnblogs

Css3新特性应用之视觉效果

一、单侧阴影 box-shadow属性的应用,格式:h-shadow v-shadow blur spread color inset属性取值介绍 h-sah...

1749
来自专栏向治洪

java解决hash算法冲突

看了ConcurrentHashMap的实现, 使用的是拉链法. 虽然我们不希望发生冲突,但实际上发生冲突的可能性仍是存在的。当关键字值域远大于哈希表的长度...

1999
来自专栏Keegan小钢

Android样式的开发:shape篇

一个应用,应该保持一套统一的样式,包括Button、EditText、ProgressBar、Toast、Checkbox等各种控件的样式,还包括控件间隔、文字...

422

扫描关注云+社区