Css渐变gradients深入理解

css渐变(专题)

css3定义了两种渐变：线性渐变（Linear Gradients）or 径向渐变（Radial Gradients）

而这个属性只有IE10以上才兼容，完了我们讨论一下渐变的兼容问题。

渐变属于背景图片中的一种，所以在css属性中，写==background== 可以写==background-image== 也可以，下面都是用background来写。

线性渐变（linear-gradient）
==特点== ：就是向一个方向进行颜色渐变，上/下/左/右/对角线

==要素== ：方向，颜色（起始，终止，中间色）

==语法== ：background: linear-gradient(to direction, color-start, color-stop1, ... , color-end);

==使用== :

第一个参数（方向，可忽略）

1. 默认第一个参数如果不写就是从上到下的
   background: linear-gradient(hotpink, darkblue);
   效果图：

   
   image.png

2. 如果有第一个参数(top/left/bottom/right)
   ==如果是原生写法记得要加to，所以后面的方向正好相反，而且对角线的时候上下和左右可以互换位置==
   to bottom(从上边开始)

to right(从左边开始)

to left(从右边开始)

to top(从下边开始)

to top left(从右下角开始)

to top right(从左下角开始)

to bottom left(从右上角开始)

to bottom right(从右下角开始

background: linear-gradient(to bottom,hotpink, darkblue);background: linear-gradient(to right,hotpink, darkblue);background: linear-gradient(to left,hotpink, darkblue);background: linear-gradient(to top,hotpink, darkblue); 
background: linear-gradient(to right bottom,hotpink, darkblue); 
background: linear-gradient(to top right,hotpink, darkblue);background: linear-gradient(to left bottom,hotpink, darkblue);background: linear-gradient(to top left,hotpink, darkblue);

image.png

3. 使用角度也可以angle(角度值deg)进行控制
   所有的颜色都是从中心出发，0deg是to top的方向，顺时针是正，逆时针是负

0deg / 360deg （从下到上）

90deg （从左到右）

180deg （从上到下）

270deg / -90deg （从右到左）

45deg （对角线左下到右上）

background: linear-gradient(0deg,#fc466b, #3f5efb);background: linear-gradient(90deg,#fc466b, #3f5efb);background: linear-gradient(180deg,#fc466b, #3f5efb);background: linear-gradient(270deg,#fc466b, #3f5efb);background: linear-gradient(360deg,#fc466b, #3f5efb);background: linear-gradient(-90deg,#fc466b, #3f5efb);background: linear-gradient(-180deg,#fc466b, #3f5efb);background: linear-gradient(45deg,#fc466b, #3f5efb);

效果图：

image.png

第二个参数（颜色）

1. 可以使用英文字母进行颜色控制

background: linear-gradient(slateblue, cornflowerblue);

效果图：

image.png

当然如果使用transparent可以看到全透明的效果渐变

background: linear-gradient(transparent, cornflowerblue);

效果图：

image.png

2. 可以使用16进制#RRGGBB进行颜色控制

background: linear-gradient(#fc466b, #3f5efb);

效果图：

image.png

3. 可以使用16进制加透明度#RRGGBBAA进行颜色控制
   所谓16进制加透明度一般不怎么使用也不推荐使用，为什么不推荐使用呢？那就是==会带来比较大的兼容问题== ，但是有时候不得不用，因为要处理透明度的兼容问题。

问题在哪里？

Chrome和火狐浏览器是支持的，形式是==#rrggbbaa== 但是这种形式在IE中就是不支持的。

IE浏览器是什么情况呢？IE9以下如果加透明度是按照==#aarrggbb== 的形式来的，但是这种形式IE10和IE11都是不支持的，所以用这个办法，IE10和IE11都出不来。所以==不推荐使用== 。

AA指透明度：00表示全透明，FF表示完全不透明。

RR指红色值

GG指绿色值

BB指蓝色值

==0~1的透明度如何转化为00-FF的十六进制的透明度呢？==

Math.round(256 * opacity).toString(16)

下面把2中的代码进行50%的透明度试试：

background: linear-gradient(#7ffc466b, #7f3f5efb);

下面是Chrome和火狐浏览器的效果图：

image.png

4. 使用rgb/rgba进行颜色控制

background: linear-gradient(rgb(255,237,188), rgb(237,66,100));   /*rbg*/background: linear-gradient(rgb(255,237,188,.5), rgb(237,66,100,.5));  /*rgba*/

效果图：

image.png

------

5. 使用多个颜色控制

只需要在后面加值就好了

background: linear-gradient(#3a1c71, #d76d77,#ffaf7b);

效果图：

https://img1.sycdn.imooc.com/5d5805730001833404010226.png

color4.png

6. 使用多个有指定范围的颜色控制

在颜色后面加百分比，就可以控制在整个宽度的百分之多少的时候到达某一个颜色值

background: linear-gradient(#3a1c71, #d76d77 20% ,#ffaf7b 70%); 
background: linear-gradient(#3a1c71, #d76d77 80% ,#ffaf7b 90%);

效果图：

https://img4.sycdn.imooc.com/5d58057700011cb305410589.png

color5.png

线性渐变总写法

background: linear-gradient(to bottom,#3a1c71, #d76d77 80% ,#ffaf7b 90%);

径向渐变（radial-gradient）

==特点== ：就是一个中心点向外围进行颜色渐变

==要素== ：方向，形状，大小，颜色（起始，终止，中间色）

==语法== ：background: radial-gradient(size shape at position,start-color, ..., last-color);

==使用== : ==都是使用200px * 200px的div==

第一个参数中的第一个参数（半径，可忽略）

1. 第一个参数不写就默认从中间开始，样式为圆形

background: radial-gradient(hotpink, darkblue);

效果图：

https://img4.sycdn.imooc.com/5d5805bf000179f202850259.png

dc1.png

2. 如果传一个值半径

background: radial-gradient(300px,hotpink, darkblue);background: radial-gradient(200px,hotpink, darkblue);

====

效果图：

https://img2.sycdn.imooc.com/5d5805c400018f2f07800412.png

size2.png

3 .如果传两个半径值

==传两个值默认为椭圆，一个是横向的长度，一个是纵向的长度==

background: radial-gradient(200px 50px,hotpink, darkblue);background: radial-gradient(50px 100px,hotpink, darkblue);

效果图：

https://img3.sycdn.imooc.com/5d5805c80001f5f307440400.png

size3.png

4. 如果传关键字(closest-side/closest-corner/farthest-side/farthest-corner)

==这个大小是由位置决定的==

4.1 如果是圆形

/*closest-side*/background: radial-gradient(closest-side,#ffaf7b, #d76d77 ,#3a1c71);/*40%只写一个表示40% 50%*/background: radial-gradient(closest-side circle at 40%,#ffaf7b, #d76d77 ,#3a1c71);  
background: radial-gradient(closest-side circle at 20% 30%,#ffaf7b, #d76d77 ,#3a1c71);/*closest-corner*/background: radial-gradient(closest-corner,#ffaf7b, #d76d77 ,#3a1c71);background: radial-gradient(closest-corner circle at 40%,#ffaf7b, #d76d77 ,#3a1c71);background: radial-gradient(closest-corner circle at 20% 30%,#ffaf7b, #d76d77 ,#3a1c71);/*farthest-side*/background: radial-gradient(farthest-side,#ffaf7b, #d76d77 ,#3a1c71);background: radial-gradient(farthest-side circle at 40%,#ffaf7b, #d76d77 ,#3a1c71);background: radial-gradient(farthest-side circle at 20% 30%,#ffaf7b, #d76d77 ,#3a1c71);/*farthest-corner*/background: radial-gradient(farthest-corner,#ffaf7b, #d76d77 ,#3a1c71);background: radial-gradient(farthest-corner circle at 40%,#ffaf7b, #d76d77 ,#3a1c71);background: radial-gradient(farthest-corner circle at 20% 30%,#ffaf7b, #d76d77 ,#3a1c71);

效果图：

https://img1.sycdn.imooc.com/5d5805ce000152a608990468.png

sizec2.png

4. 2 如果是椭圆

/*closest-side*/background: radial-gradient(closest-side ellipse,#ffaf7b, #d76d77 ,#3a1c71);/*40%只写一个表示40% 50%*/background: radial-gradient(closest-side ellipse at 40%,#ffaf7b, #d76d77 ,#3a1c71);  
background: radial-gradient(closest-side ellipse at 20% 30%,#ffaf7b, #d76d77 ,#3a1c71);/*closest-corner*/background: radial-gradient(closest-corner ellipse,#ffaf7b, #d76d77 ,#3a1c71);background: radial-gradient(closest-corner ellipse at 40%,#ffaf7b, #d76d77 ,#3a1c71);background: radial-gradient(closest-corner ellipse at 20% 30%,#ffaf7b, #d76d77 ,#3a1c71);/*farthest-side*/background: radial-gradient(farthest-side ellipse,#ffaf7b, #d76d77 ,#3a1c71);background: radial-gradient(farthest-side ellipse at 40%,#ffaf7b, #d76d77 ,#3a1c71);background: radial-gradient(farthest-side ellipse at 20% 30%,#ffaf7b, #d76d77 ,#3a1c71);/*farthest-corner*/background: radial-gradient(farthest-corner ellipse,#ffaf7b, #d76d77 ,#3a1c71);background: radial-gradient(farthest-corner ellipse at 40%,#ffaf7b, #d76d77 ,#3a1c71);background: radial-gradient(farthest-corner ellipse at 20% 30%,#ffaf7b, #d76d77 ,#3a1c71);

效果图：

https://img4.sycdn.imooc.com/5d5805d20001e35b08860435.png

sizec3.png

第一个参数中的二个参数（形状，可忽略）

1. 如果只参数shape（circle,ellipse）

==如果div是正方形那么circle和ellipse并没有什么区别，但是如果是长方形，那么ellipse就会根据长度进行压缩==

background: radial-gradient(circle,hotpink, darkblue); /*下图1和3*/background: radial-gradient(ellipse,hotpink, darkblue); /*下图2和4*/

效果图（左边两个是200px * 200px ，右边两个是200px *100px）

https://img1.sycdn.imooc.com/5d5805d80001229609390277.png

circle1.png

2. 如果是加上长度范围和形状

==该范例要说明半径要写到形状前面，且半径作用大于形状==

background: radial-gradient(300px circle,hotpink, darkblue);background: radial-gradient(200px circle,hotpink, darkblue);background: radial-gradient(100px circle,hotpink, darkblue);background: radial-gradient(50px circle,hotpink, darkblue);background: radial-gradient(0px circle,hotpink, darkblue);/*如果这里加了长短轴的尺寸后面又写了circle，那么circle是不起作用的，出来还是一个椭圆*/background: radial-gradient(200px 50px ellipse,hotpink, darkblue);

效果图：

https://img2.sycdn.imooc.com/5d5805db00013e1108950199.png

size1.png

第一个参数中的第三个参数（方向，可忽略）

1. 如果第一个有参数(center/top/bottom/left/right)

==如果是原生写法记得要加at，而且对角线的时候上下和左右可以互换位置==

background: radial-gradient(at center,hotpink, darkblue);background: radial-gradient(at top,hotpink, darkblue);background: radial-gradient(at bottom,hotpink, darkblue);background: radial-gradient(at left,hotpink, darkblue);background: radial-gradient(at right,hotpink, darkblue);background: radial-gradient(at center center,hotpink, darkblue);background: radial-gradient(at top left,hotpink, darkblue);background: radial-gradient(at top right,hotpink, darkblue);background: radial-gradient(at bottom right,hotpink, darkblue);background: radial-gradient(at bottom left,hotpink, darkblue);

效果图：

https://img1.sycdn.imooc.com/5d5805df0001632a08980376.png

dc2.png

2. 如果方向为具体数值确定圆心

==可以是正数也可以是负数，可以超出范围==

background: radial-gradient(circle at 0 0,hotpink, darkblue);background: radial-gradient(circle at 50px 50px,hotpink, darkblue);background: radial-gradient(circle at 100px 50px,hotpink, darkblue);background: radial-gradient(circle at 50px 100px,hotpink, darkblue);background: radial-gradient(circle at 100px 100px,hotpink, darkblue);

效果图：

https://img4.sycdn.imooc.com/5d5805e300018f7508890339.png

dc3.png

3. 如果方向为百分比确定圆心

==可以是整数也可以是负数，可以超出范围，方向和上面的一样==

background: radial-gradient(circle at 0 0,hotpink, darkblue);background: radial-gradient(circle at 25% 25%,hotpink, darkblue);background: radial-gradient(circle at -25% 50%,hotpink, darkblue);background: radial-gradient(circle at 50% 150%,hotpink, darkblue);background: radial-gradient(circle at 50% 50%,hotpink, darkblue);

效果图：

https://img1.sycdn.imooc.com/5d5805e800016c0209180193.png

/* at 后面 代表中心点的位置 然后 前面的px 和 % 代表 当前这个区域展示 的面积 如： div 1000 * 1000 -> 200 * 200 表示在1000中显示的区域 */
    background: radial-gradient(
        200px 100px at center, 
        #f7f7b6,
        #e96f92,
        #1b2947
    );

转载自：https://www.imooc.com/article/76588