linear-gradient 的“高能”用法

首先，让我们来了解一下“linear-gradient”的基本用法：

说明：用线性渐变创建图像

语法：

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

<side-or-corner> = [left | right] || [top | bottom]

<color-stop> = <color> [ <length> | <percentage> ]?

取值：

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

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

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

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

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

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

<color-stop>：用于指定渐变的起止颜色：

<color>：指定颜色。

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

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

其他知识点：

不知你是否注意到“第一个”语法后面的“+”号没，这些符号（“?”、“+”、“*”）其实用法跟正则表达式很像，如果正则表达式不知道的请看下面正解：

　　,：代表每个属性之间的分隔符号。

　　?：代表“属性”可以出现零次或一次，也就是可有可无

　　+：代表“属性”可以出现一次或多次，但是必须出现一次

　　*：代表“属性”可以出现零次或多次。

　　|：代表可以从多个“属性”中任选一个。

　　||：代表“属性”可以是左边的一个或是右边的一个，或是两个都行

　　[]：代表里面是“属性”或“属性”集合

　　<>：这个不是正则表达式里面的，但是它代表定义的取值范围，如上语法的“<angle>”，取值的里面就会附带说明这个“<angle>”是干嘛的

　　{1,4}：代表“属性”最少出现一次，最多出现四次。“1”和“4”都是动态的值，不是固定的，根据描述而定

来看看基本用法实例：

　　(图1)

　　linear-gradient(#fff, #333);

　　linear-gradient(to bottom, #fff, #333);

　　linear-gradient(to top, #333, #fff);

　　linear-gradient(180deg, #fff, #333);

　　linear-gradient(to bottom, #fff 0%, #333 100%);

　　以上这五句样式都可以实现（图1）的渐变效果

再来看看复杂点的普通实例：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 　　<meta charset="utf-8" />
 5 　　<title></title>
 6 　　<style>
 7 　　　　div { width: 200px; height: 100px; margin-top: 10px; border: 1px solid #ddd;}
 8 　　　　.test { background: linear-gradient(#fff, #333);}
 9 　　　　.test2 { background: linear-gradient(#000, #f00 50%, #090);}
10 　　　　.test3 { background: linear-gradient(0deg, #000 20%, #f00 50%, #090 80%);}
11 　　　　.test4 { background: linear-gradient(45deg, #000, #f00 50%, #090);}
12 　　　　.test5 { background: linear-gradient(to top right, #000, #f00 50%, #090);}
13 　　</style>
14 </head>
15 <body>
16 　　<div class="test"></div>
17 　　<div class="test2"></div>
18 　　<div class="test3"></div>
19 　　<div class="test4"></div>
20 　　<div class="test5"></div>
21 </body>
22 </html>

View Code

效果图：

再让我们看看“高能”的用法：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8" />
 5     <title></title>
 6     <style>
 7         body{ background: linear-gradient(63deg, #999 23%, transparent 23%) 7px 0, linear-gradient(63deg, transparent 74%, #999 78%), linear-gradient(63deg, transparent 34%, #999 38%, #99958%, transparent 62%), #444; background-size: 16px 48px;}
 8     </style>
 9 </head>
10 <body>
11 </body>
12 </html>

View Code

效果图：

怎么样，效果是不是很酷炫？再瞧瞧其他的：

还有更多好看的就不展示了，源自国外大牛：http://lea.verou.me/css3patterns/#chocolate-weave

其中的几个重要知识点总结：

■Ⅰ.“background”的绘制顺序是从后面的开始向前面的绘制的，百说不如一栗：

1 background: linear-gradient(45deg, #dca 12%, transparent 0, transparent 88%, #dca 0),linear-gradient(135deg, transparent 37%, #a85 0, #a85 63%, transparent 0),linear-gradient(45deg, transparent 37%, #dca 0, #dca 63%, transparent 0) #753;background-size: 25px 25px;

background绘制时是从“linear-gradient(45deg, transparent 37%, #dca 0, #dca 63%, transparent 0) #753”绘制到...头部的“linear-gradient(45deg, #dca 12%, transparent 0, transparent 88%, #dca 0)”渐变样式。所以这“点”要注意了。

■Ⅱ.每一个使用“linear-gradient”绘制出来的渐变效果，都可以看作是一张背景图。因为，这个可以在“background-size”里设置（每个背景图的大小用逗号“,”区分）。

■Ⅲ.【非常重要】，制作复杂的背景图并不难，但是你得知道“background-repeat”的原理就是每一张背景图都按照你设定的“属性”去绘制。如果你不知道这个原理，甚至没注意到。那么当你第一次看到这么漂亮的背景效果，想自己动手丰衣足食的时候却发现，“What is this？”，看看我第一次写的背景效果。

第一次写的：

理想样子：

实际样式：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8" />
 5 <title></title>
 6 <style>
 7 body{ 8     background:linear-gradient(to right, transparent 0%, #F00 0%, #F00 100%, transparent 100%) 25px 25px,
 9     linear-gradient(to top,transparent 0%, #0F0 0%, #0F0 50%, transparent 50%),
10     linear-gradient(to right, transparent 0%, #F00 0%, #F00 50%, transparent 50%),
11     linear-gradient(to right, transparent 50%, #0F0 50%, #0F0 100%, transparent 100%);
12
13     background-color:#FFF;
14     background-size:25px 25px, 50px 50px, 50px 50px, 50px 50px;
15     background-repeat:repeat;
16 }
17 </style>
18 </head>
19 <body>
20 </body>
21 </html>

View Code

效果图：

⊙︿⊙ 好桑心，怎么整个网页红色的？

其实这其中就是“background-repeat”的原理问题：每个图片都是x、y复制绘制的“background-repeat:repeat”，所以当“background-size”不是一致的时候，复制绘制的位置也是不一样的。

知道是这个原因了，改动一下。

正确的样式：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8" />
 5 <title></title>
 6 <style>
 7 body{ 8     background:linear-gradient(135deg, transparent 0%, #F00 0%, #F00 25%, transparent 25%) 25px 25px,
 9     linear-gradient(315deg, transparent 0%, #F00 0%, #F00 25%, transparent 25%),
10     linear-gradient(to top,transparent 0%, #0F0 0%, #0F0 50%, transparent 50%),
11     linear-gradient(to right, transparent 0%, #F00 0%, #F00 50%, transparent 50%),
12     linear-gradient(to right, transparent 50%, #0F0 50%, #0F0 100%, transparent 100%);
13
14     background-color:#FFF;
15     background-size:50px 50px;
16     background-repeat:repeat;
17 }
18 </style>
19 </head>
20 <body>
21 </body>
22 </html>

View Code

效果图：

知道原理才是硬道理 ╰(￣▽￣)╮

转载于:https://www.cnblogs.com/2015xifan/p/5281489.html

linear-gradient 的“高能”用法相关推荐

CSS3中的 Background linear gradient()用法
本文参考自css only muti-color background如有兴趣的同学可以去看看这篇文章这篇文章主要通过几个例子看看linear-gradient()的具体用法对linear-grad ...
excel插入页码_Excel里毫不起眼的页眉页脚，居然有这3种高能用法！
点击上方蓝字关注星标★不迷路本文作者:小敏本文编辑:小叮一说到页眉页脚,你脑海中出现的,是不是这样一个画面? 规规矩矩的页眉页脚,比如,公司 logo 或者文件名称放在页眉位置,底部加个页码. ...
16.SVG线性渐变（Linear Gradient）
SVG 渐变和CSS3一样,SVG也支持渐变,渐变就是从一个颜色到另外一个颜色的平滑过渡,SVG支持单个元素使用多个渐变.渐变方式有两种:线性和径向. SVG 线性渐变 - linearGradie ...
***CSS3 Gradient渐变色（转：http://www.w3cplus.com/content/css3-gradient）
CSS3 Gradient分为linear-gradient(线性渐变)和radial-gradient(径向渐变).而我们今天主要是针对线性渐变来剖析其具体的用法.为了更好的应用CSS3 Gradi ...
Paint画笔Shader之LinearGradient的用法
参数讲解 /** Create a shader that draws a linear gradient along a line. 创建一个shader绘制一条线@param x0 The x-c ...
css 颜色渐变 Gradient
原文:http://www.w3cplus.com/content/css3-gradient CSS3 Gradient 作者:大漠日期:2011-04-21 点击:35374 gradient ...
蓝牙怎么实现传输的_不知道手机蓝牙有啥用？1分钟带你了解蓝牙这6种用法！涨知识啦...
每台手机基本上都有这个设置:蓝牙.那么蓝牙究竟有什么用呢?不少朋友都不知道蓝牙的用法,那么今天小编就来给大家分享蓝牙的6大用法,下面就一起来了解一下吧~ 一.基础用法 1.传输文件首先,就是传输文件 ...
python get score gain_Python functional.linear方法代码示例
本文整理汇总了Python中torch.nn.functional.linear方法的典型用法代码示例.如果您正苦于以下问题:Python functional.linear方法的具体用法?Pytho ...
重构之美－浴火重生的火凤凰CSS3【前传：Gradient】
叮叮叮,铛铛铛,上课了上课了,同学们挨个坐好,爆老师要点名啦! 额,在上课之前先说一下,本套课程所有图例或示例包括以后涉及到的动画,我都将使用CSS3来设计,不采用一张图片,所以请使用Chrome浏览 ...

linear-gradient 的“高能”用法

首先，让我们来了解一下“linear-gradient”的基本用法：

linear-gradient 的“高能”用法相关推荐

最新文章

热门文章