CSS渐变和混合

CSS渐变

要点

颜色、方向和位置

linear-gradient

// 一般写法，可以有一个以上的color
linear-gradient(角度deg, color1 color-stop?长度px||百分比, color2 color-stop?长度px||百分比)

线性渐变中的角度默认是从下到上的垂直方向开始顺时针进行旋转的。老版本浏览器有差别。

radial-gradient

// 一般写法，可以有一个以上的color
radial-gradient(<shape?>||<size? at position?>, color1 color-stop?长度px||百分比, color2 color-stop?长度px||百分比)

shape形状

• circle 圆形
• ellipse 椭圆形

size尺寸大小，隐式声明形状

• closest-side （指定径向渐变的半径长度为从圆心到离圆心最近的边）
• closest-corner （指定径向渐变的半径长度为从圆心到离圆心最近的角）
• farthest-side （指定径向渐变的半径长度为从圆心到离圆心最远的边）
• farthest-corner （指定径向渐变的半径长度为从圆心到离圆心最远的角）

也可以用数值来表示,

只传入一个大小参数，则表示该渐变形状为圆,

radial-gradient(60px,#f00 0%,#ff0 100%);// 半径大小为60px

传入两个大小不同的参数，则表示该渐变形状为椭圆

radial-gradient(60% 50%,#f00 0%,#ff0 100%);// x轴为60%， y轴为50%, 大小区分长短半轴,

若渐变形状为圆形，则该渐变大小不能为百分数，而椭圆既可以为具体数值也可以为百分数

position 圆心位置

具体数值（或百分数）x(自左而右) y(自上而下) || 方位名称(center, top, …)

radial-gradient(150% 210% at 100% 0%, #f00 0%,#ff0 100%)

注意： 圆心位置参数一定要置于radial-gradient()第一个参数的末尾

柔色混合渐变示例

1. background: linear-gradient(115deg, rgb(211, 255, 215) 0%, rgb(0, 0, 0) 100%), 
   radial-gradient(90% 100% at 50% 0%, rgb(200, 200, 200) 0%, rgb(22, 0, 45) 100%), radial-gradient(100% 100% at 80% 0%, rgb(250, 255, 0) 0%, rgb(36, 0, 0) 100%), 
   radial-gradient(150% 210% at 100% 0%, rgb(112, 255, 0) 0%, rgb(20, 175, 125) 0%, rgb(0, 10, 255) 100%), 
   radial-gradient(100% 100% at 100% 30%, rgb(255, 77, 0) 0%, rgba(0, 200, 255, 1) 100%), linear-gradient(60deg, rgb(255, 0, 0) 0%, rgb(120, 86, 255) 100%);
   background-blend-mode: overlay, overlay, difference, difference, difference, normal;
   

2. background: linear-gradient(180deg, #F7D6FF 0%, #005686 100%), 
   linear-gradient(180deg, #FFFFFF 0%, #060046 100%), 
   linear-gradient(130deg, #00FFA3 0%, #1A003C 100%), 
   linear-gradient(307deg, #FF0000 0%, #3300C6 100%), 
   radial-gradient(50% 72% at 50% 50%, #004584 0%, #00FFB2 100%), 
   radial-gradient(100% 140% at 100% 0%, #5ED500 0%, #2200AA 100%);
   background-blend-mode: soft-light, overlay, difference, difference, color-burn,normal;
   

3. 示例2旋转180度

   background: 
   linear-gradient(0deg, #F7D6FF 0%, #005686 100%), 
   linear-gradient(0deg, #FFFFFF 0%, #060046 100%), 
   linear-gradient(310deg, #00FFA3 0%, #1A003C 100%), 
   linear-gradient(127deg, #FF0000 0%, #3300C6 100%), 
   radial-gradient(50% 72% at 50% 50%, #004584 0%, #00FFB2 100%), 
   radial-gradient(100% 140% at 0% 100%, #5ED500 0%, #2200AA 100%);
     background-blend-mode: soft-light, overlay, difference, difference, color-burn, normal;
   

blend-mode

**blend-mode**是一种 CSS 数据类型，用于描述当元素重叠时，颜色应当如何呈现。它被用于 background-blend-mode 和 mix-blend-mode 属性。

混合模式应该按background属性同样的顺序定义。如果混合模式数量与背景图像的数量不相等，它会被截取至相等的数量。

当层重叠时，混合模式是计算像素最终颜色值的方法，每种混合模式采用前景和背景的颜色值，执行其计算并返回最终的颜色值。最终的可见层是对混合层中的每个重叠像素执行混合模式计算的结果。

normal

最终颜色永远是顶层颜色，无论底层颜色是什么。
其效果类似于两张不透明的纸重叠（overlapping）在一起。

multiply

最终颜色为顶层颜色与底层颜色相乘的结果。
如果叠加黑色层，则最终层必为黑色层，叠加白色层不会造成变化。
其效果类似于在透明薄膜上重叠印刷的两个图像。

screen

最终的颜色是反转顶层颜色和底层颜色，将反转后的两个颜色相乘，再反转相加得到的和得到的结果。
黑色层不会造成变化，白色层导致白色最终层。
其效果类似于（被投影仪）投射到投影屏幕上的两个图像。

overlay

如果底层颜色比顶层颜色深，则最终颜色是 multiply 的结果，如果底层颜色比顶层颜色浅，则最终颜色是 screen 的结果。
此混合模式相当于顶层与底层互换后的 hard-light。

darken

最终颜色是由每个颜色通道下，顶底两层颜色中的最暗值所组成的颜色。

lighten

最终颜色是每个颜色通道下，顶底两层颜色中的最亮值所组成的颜色。

color-dodge

最终颜色是将底部颜色除以顶部颜色的反色的结果。
黑色前景不会造成变化。前景如果是背景的反色，会得到白色（fully lit color，完全亮起的颜色，应当为白色）。
此混合模式类似于 screen，但是，前景只需要和背景的反色一样亮，最终图像就会变为全白。

color-burn

最终颜色是反转底部颜色，将反转后的值除以顶部颜色，再反转除以后的值得到的结果。
白色的前景不会导致变化，前景如果是背景的反色，会得到黑色。
此混合模式类似于 multiply，但是，前景只需要和背景的反色一样暗，最终图像就会变为全黑。

hard-light

如果顶层颜色比底层颜色深，则最终颜色是 multiply 的结果，如果顶层颜色比底层颜色浅，则最终颜色是 screen 的结果。
此混合模式相当于顶层与底层互换后的 overlay。
其效果类似于在背景层上（用前景层）打出一片刺眼的聚光灯。

soft-light

最终颜色类似于 hard-light 的结果，但更加柔和一些。
此混合模式的表现类似 hard-light。
其效果类似于在背景层上（用前景层）打出一片发散的聚光灯。

difference

最终颜色是 两种颜色中较浅的颜色 减去 两种颜色中较深的颜色 得到的结果。
黑色层不会造成变化，而白色层会反转另一层的颜色。

exclusion

最终颜色类似于 difference，但对比度更低一些。
和 difference 相同，黑色层不会造成变化，而而白色层会反转另一层的颜色。

hue

最终颜色由顶部颜色的色调和底部颜色的饱和度与亮度组成。

saturation

最终颜色由顶部颜色的色调和底部颜色的饱和度与发光度组成。
饱和度为零的纯灰色背景层不会造成变化。

color

最终颜色由顶部颜色的色调与饱和度和底部颜色的亮度组成。
此效果保留了灰度级别，可用于为前景着色。

luminosity

最终颜色由顶部颜色的亮度和底部颜色的色调和饱和度组成。
此混合模式相当于顶层与底层互换后的 color。# CSS渐变

要点

颜色、方向和位置

linear-gradient

// 一般写法，可以有一个以上的color
linear-gradient(角度deg, color1 color-stop?长度px||百分比, color2 color-stop?长度px||百分比)

线性渐变中的角度默认是从下到上的垂直方向开始顺时针进行旋转的。老版本浏览器有差别。

radial-gradient

// 一般写法，可以有一个以上的color
radial-gradient(<shape?>||<size? at position?>, color1 color-stop?长度px||百分比, color2 color-stop?长度px||百分比)

shape形状

• circle 圆形
• ellipse 椭圆形

size尺寸大小，隐式声明形状

• closest-side （指定径向渐变的半径长度为从圆心到离圆心最近的边）
• closest-corner （指定径向渐变的半径长度为从圆心到离圆心最近的角）
• farthest-side （指定径向渐变的半径长度为从圆心到离圆心最远的边）
• farthest-corner （指定径向渐变的半径长度为从圆心到离圆心最远的角）

也可以用数值来表示,

只传入一个大小参数，则表示该渐变形状为圆,

radial-gradient(60px,#f00 0%,#ff0 100%);// 半径大小为60px

传入两个大小不同的参数，则表示该渐变形状为椭圆

radial-gradient(60% 50%,#f00 0%,#ff0 100%);// x轴为60%， y轴为50%, 大小区分长短半轴,

若渐变形状为圆形，则该渐变大小不能为百分数，而椭圆既可以为具体数值也可以为百分数

position 圆心位置

具体数值（或百分数）x(自左而右) y(自上而下) || 方位名称(center, top, …)

radial-gradient(150% 210% at 100% 0%, #f00 0%,#ff0 100%)

注意： 圆心位置参数一定要置于radial-gradient()第一个参数的末尾

柔色混合渐变示例

1. background: linear-gradient(115deg, rgb(211, 255, 215) 0%, rgb(0, 0, 0) 100%), 
   radial-gradient(90% 100% at 50% 0%, rgb(200, 200, 200) 0%, rgb(22, 0, 45) 100%), radial-gradient(100% 100% at 80% 0%, rgb(250, 255, 0) 0%, rgb(36, 0, 0) 100%), 
   radial-gradient(150% 210% at 100% 0%, rgb(112, 255, 0) 0%, rgb(20, 175, 125) 0%, rgb(0, 10, 255) 100%), 
   radial-gradient(100% 100% at 100% 30%, rgb(255, 77, 0) 0%, rgba(0, 200, 255, 1) 100%), linear-gradient(60deg, rgb(255, 0, 0) 0%, rgb(120, 86, 255) 100%);
   background-blend-mode: overlay, overlay, difference, difference, difference, normal;
   

2. background: linear-gradient(180deg, #F7D6FF 0%, #005686 100%), 
   linear-gradient(180deg, #FFFFFF 0%, #060046 100%), 
   linear-gradient(130deg, #00FFA3 0%, #1A003C 100%), 
   linear-gradient(307deg, #FF0000 0%, #3300C6 100%), 
   radial-gradient(50% 72% at 50% 50%, #004584 0%, #00FFB2 100%), 
   radial-gradient(100% 140% at 100% 0%, #5ED500 0%, #2200AA 100%);
   background-blend-mode: soft-light, overlay, difference, difference, color-burn,normal;
   

3. 示例2旋转180度

   background: 
   linear-gradient(0deg, #F7D6FF 0%, #005686 100%), 
   linear-gradient(0deg, #FFFFFF 0%, #060046 100%), 
   linear-gradient(310deg, #00FFA3 0%, #1A003C 100%), 
   linear-gradient(127deg, #FF0000 0%, #3300C6 100%), 
   radial-gradient(50% 72% at 50% 50%, #004584 0%, #00FFB2 100%), 
   radial-gradient(100% 140% at 0% 100%, #5ED500 0%, #2200AA 100%);
     background-blend-mode: soft-light, overlay, difference, difference, color-burn, normal;
   

blend-mode

**blend-mode**是一种 CSS 数据类型，用于描述当元素重叠时，颜色应当如何呈现。它被用于 background-blend-mode 和 mix-blend-mode 属性。

混合模式应该按background属性同样的顺序定义。如果混合模式数量与背景图像的数量不相等，它会被截取至相等的数量。

当层重叠时，混合模式是计算像素最终颜色值的方法，每种混合模式采用前景和背景的颜色值，执行其计算并返回最终的颜色值。最终的可见层是对混合层中的每个重叠像素执行混合模式计算的结果。

normal

最终颜色永远是顶层颜色，无论底层颜色是什么。
其效果类似于两张不透明的纸重叠（overlapping）在一起。

multiply

最终颜色为顶层颜色与底层颜色相乘的结果。
如果叠加黑色层，则最终层必为黑色层，叠加白色层不会造成变化。
其效果类似于在透明薄膜上重叠印刷的两个图像。

screen

最终的颜色是反转顶层颜色和底层颜色，将反转后的两个颜色相乘，再反转相加得到的和得到的结果。
黑色层不会造成变化，白色层导致白色最终层。
其效果类似于（被投影仪）投射到投影屏幕上的两个图像。

overlay

如果底层颜色比顶层颜色深，则最终颜色是 multiply 的结果，如果底层颜色比顶层颜色浅，则最终颜色是 screen 的结果。
此混合模式相当于顶层与底层互换后的 hard-light。

darken

最终颜色是由每个颜色通道下，顶底两层颜色中的最暗值所组成的颜色。

lighten

最终颜色是每个颜色通道下，顶底两层颜色中的最亮值所组成的颜色。

color-dodge

最终颜色是将底部颜色除以顶部颜色的反色的结果。
黑色前景不会造成变化。前景如果是背景的反色，会得到白色（fully lit color，完全亮起的颜色，应当为白色）。
此混合模式类似于 screen，但是，前景只需要和背景的反色一样亮，最终图像就会变为全白。

color-burn

最终颜色是反转底部颜色，将反转后的值除以顶部颜色，再反转除以后的值得到的结果。
白色的前景不会导致变化，前景如果是背景的反色，会得到黑色。
此混合模式类似于 multiply，但是，前景只需要和背景的反色一样暗，最终图像就会变为全黑。

hard-light

如果顶层颜色比底层颜色深，则最终颜色是 multiply 的结果，如果顶层颜色比底层颜色浅，则最终颜色是 screen 的结果。
此混合模式相当于顶层与底层互换后的 overlay。
其效果类似于在背景层上（用前景层）打出一片刺眼的聚光灯。

soft-light

最终颜色类似于 hard-light 的结果，但更加柔和一些。
此混合模式的表现类似 hard-light。
其效果类似于在背景层上（用前景层）打出一片发散的聚光灯。

difference

最终颜色是 两种颜色中较浅的颜色 减去 两种颜色中较深的颜色 得到的结果。
黑色层不会造成变化，而白色层会反转另一层的颜色。

exclusion

最终颜色类似于 difference，但对比度更低一些。
和 difference 相同，黑色层不会造成变化，而而白色层会反转另一层的颜色。

hue

最终颜色由顶部颜色的色调和底部颜色的饱和度与亮度组成。

saturation

最终颜色由顶部颜色的色调和底部颜色的饱和度与发光度组成。
饱和度为零的纯灰色背景层不会造成变化。

color

最终颜色由顶部颜色的色调与饱和度和底部颜色的亮度组成。
此效果保留了灰度级别，可用于为前景着色。

luminosity

最终颜色由顶部颜色的亮度和底部颜色的色调和饱和度组成。
此混合模式相当于顶层与底层互换后的 color。