css3中的线性渐变

线性渐变公式：

background-image: linear-gradient( [ <angle> | <side-or-corner> ]?, <color-stop> [, <color-stop>]+ );</color-stop></color-stop></side-or-corner></angle>

意为：(角度deg或者方位词,一个或多个渐变颜色关键结点（多个的话用","隔开）);

此种写法跟正则表达式类似：

[ ]：代表一个字符位，一般跟 “|” 连用，表示从[ ]中选择一个；

|：表示“或”，意为从此符号左右两边选择一个。

eg：[1|2]，即表示此位不是1就是2；

？：表示可有可无，取值范围为[0,1]；

*：表示可有可无，取值范围为(0,+∞)；

+：表示至少有一个，取值范围为[1,+∞]；

此篇用Chrome浏览器预览，故加上-webkit-前缀（以红黄二色为例）

1.angle是渐变的角度，表示为xxdeg。

1）找到渐变图形的中心点，以此为坐标原点做坐标系。

2）从0deg开始，逆时针旋转形成的夹角角度为正，顺时针旋转形成的夹角角度为负。

3）渐变趋势跟沿着旋转一定角度后形成的射线方向相同。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

xx=0 或 xx=360 时，渐变为水平从左向右；
eg:background: -webkit-linear-gradient(0deg,red 0,yellow 200px);
xx=90 时，渐变为垂直从下向上；
eg:background: -webkit-linear-gradient(90deg,red 0,yellow 200px);
xx=180 时，渐变为水平从右向左；
eg:background: -webkit-linear-gradient(180deg,red 0,yellow 200px);
xx=270 时，渐变为垂直从上向下；
eg:background: -webkit-linear-gradient(270deg,red 0,yellow 200px);

图例一：

0<xx eg:beg:ackground: eg:background:><p><span style="font-family: 'Microsoft YaHei'; font-size: 18px;">图例二：</span></p>
<p> <img src="https://img.php.cn/upload/article/000/023/547/8042825d1ecb8b0289b06ddb74caf779-5.png?x-oss-process=image/resize,p_40" alt="">   <img src="https://img.php.cn/upload/article/000/023/547/8042825d1ecb8b0289b06ddb74caf779-6.png?x-oss-process=image/resize,p_40" alt=""> </p>
<p> <img src="https://img.php.cn/upload/article/000/023/547/8042825d1ecb8b0289b06ddb74caf779-7.png?x-oss-process=image/resize,p_40" alt="">   <img src="https://img.php.cn/upload/article/000/023/547/8042825d1ecb8b0289b06ddb74caf779-8.png?x-oss-process=image/resize,p_40" alt=""></p>
<h3><span style="font-family: 'Microsoft YaHei'; font-size: 18px;">2.side-or-corner (边或角)</span></h3>
<p><span style="font-family: 'Microsoft YaHei';">　　<span style="font-size: 16px;">可选值有<span style="background-color: #ffff00;"> top（270deg或-90deg）、 bottom（90deg）、left （0deg）、right（180deg）、left top（315deg或-45deg）、left bottom（45deg）、right top（225deg或-135deg）、right bottom（135deg）</span>，用来表示 从上往下、从下往上、从左往右、从右往左、从左上往右下、从左下往右上、从右上往左下、从右下往左上等方位。</span></span></p>
<h3><span style="font-family: 'Microsoft YaHei';"><span style="font-size: 18px;">3.color-stop(渐变关键颜色结点)</span></span></h3>
<p><span style="font-family: 'Microsoft YaHei';"><span style="font-size: 16px;">   公式：<color> [ <percentage> | <length> ]</length></percentage></color></span></span></p>
<p><span style="font-size: 16px;"><span style="font-family: 宋体;"><span style="font-family: 'Microsoft YaHei';">   意为：颜色值或代表颜色的英文单词</span></span><span style="font-family: 'Microsoft YaHei';">+空格+此渐变关键点所在位置在相应图形中所占的百分比或长度值（px）;</span></span></p>
<p><span style="font-size: 16px; font-family: 'Microsoft YaHei';">　注：此处一个颜色值<color>只能对应一个位置[ <percentage> | <length> ]（百分比是位置在两个颜色关键结点<span style="background-color: #ffff00;">连线的百分比</span>，长度值是位置和原点的<span style="background-color: #ffff00;">距离</span>）。</length></percentage></color></span></p></xx>