css grandient,css-grandient用法

css 3背景色的过渡样式。

过渡样式有两种，线性渐变 (linear-gradient)和 径向渐变 (Radial-gradient)

linear-gradient

该语法至少要有三个参数([起始位置 x y]  方向或角度,  颜色节点，颜色节点  [，颜色节点])

方向可选参数：to bottom、to top、to right、to left、to bottom right，等等

关于角度

但是，请注意很多浏览器(Chrome、Safari、firefox等)的使用了旧的标准，即 0deg 将创建一个从左到右的渐变，90deg 将创建一个从下到上的渐变。

linear-gradient(direction, color-stop1, color-stop2 [, ...])

例：background-image: linear-gradient(10 10 -90deg, red 0%, yellow 100%);

background-image:-webkit- linear-gradient(-90deg, red 0%, yellow 100%);

background-image: -moz-linear-gradient(-90deg, red 0%, yellow 100%);

background-image: -o-linear-gradient(-90deg, red 0%, yellow 100%);

IE 浏览器·

IE6-8浏览器实现渐变只能使用IE自己的滤镜去实现

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=＃00ffff,endColorstr=＃9fffff,grandientType=1);

第一个参数：渐变起始位置的颜色

第二个参数：渐变终止位置的颜色

第三个参数：渐变的类型

0 代表竖向渐变        1  代表横向渐变

高级用法：

原文链接： https://www.jianshu.com/p/3c652606e6d6

制作切角效果：background-image:     /*过渡类似于背景图片的用法*/

linear-gradient(135deg, transparent 15px,#F8E2EB 0) top left,

linear-gradient(-135deg, transparent 15px,#ace 0) top right,

linear-gradient(-45deg, transparent 15px,#F8E2EB 0)bottom right,

linear-gradient(45deg, transparent 15px,#ace 0)bottom left;

background-size:50% 50%;    /*每个块在水平和垂直方向上都占元素尺寸的50%*/

background-repeat:no-repeat;

上边样式的效果图

内凹圆角效果

background:radial-gradient(circle at top left,transparent 15px,#F8E2EB0) top left,

radial-gradient(circle at top right,transparent 15px,#ace0) top right,

radial-gradient(circle at bottom right,transparent 15px,#F8E2EB0) bottom right,

radial-gradient(circle at bottom left,transparent 15px,#ace0) bottom left;

background-size:50%50%;

background-repeat:no-repeat;

圆角效果图

Radial-gradienty

语法

background-image: radial-gradient(shape size at position, start-color, ..., last-color);

shape:径向渐变的形状   可选： circle  ellipse

size:可选四个参数 closest-side | closest-corner | farthest-side | farthest-corner   最近的边，最近的角，最远的边，最远的角。也可以设置半径，如果是圆 设置一个半径值，如果是椭圆，需要设置短半径和长半径值

position: 确定圆心的位置。如果提供2个参数，第一个表示横坐标，第二个表示纵坐标；如果只提供一个，第二值默认为50%，即center

color-stop:颜色节点，同linear-gradient

例：background-image: radial-gradient(circle closest-side,red 5%, yellow 15%, green 60%);

background-image: radial-gradient(circle 15px at 15% 20% ,red 5%, yellow 15%, green 60%);