CSS函数大全

1.attr()获取HTML 属性值

用来获取选择到的元素的某一 HTML 属性值，并用于其样式。它也可以用于伪元素，属性值采用伪元素

所依附的元素。

attr() 理论上能用于所有的 CSS 属性但 目前支持的仅有 伪元素的 content 属性 ，其他的属性和高

级特性目前是实验性的

1 < p data - foo = "hello" > world </ p >

2

3 p : before {

4 content : attr ( data - foo ) " " ;

5 }

6

2.calc()计算

在声明 CSS 属性值时执行一些计算。它可以用在如下场合：<length>、<frequency>,

<angle>、<time>、<percentage>、<number>、或 <integer>。

1 /* property: calc(expression) */

2 width : calc ( 100% - 80px );

符号可使用：+、-、*、/

3.var()插入自定义属性的值

var()函数用于 插入自定义属性的值 ，而不是另一个属性的值的任何部分。

1 var ( custom - property - name , value )

2 custom - property - name 必需的。 自定义属性的名称（必须以两个破折号开头）

3 value 可选的。 回退值（如果自定义属性无效，则使用）

当第一个值未定义，回退值生效

1 /* 回退值 */ 2

3 /* 在 component 的样式中 : */

4 .component .header {

5 /* header-color 没有被设置 , 将使用回退值 blue */

6 color : var (

7 --header-color ,

8 blue

9 );

10 }

11

12 .component .text {

13 color : var ( --text-color , black );

14 }

15

16 /* In the larger application's style: */

17 .component {

18 --text-color : #080 ;

19 }

20

使用自定义属性作为回退值

1 :root {

2 --backup-bg-color : teal ;

3 }

4

5 body {

6 /* main-bg-color 没有被设置，将使用回退值 backup-bg-color 。如果 backup-bg-color 没有被设

置，将使用回退值 white 。 */

7 color : var ( --main-bg-color , var ( --backup-bg-color , white ));

8 }

9

4.颜色类型函数

（1）rgb()颜色

rgb()函数使用红 - 绿 - 蓝（RGB）模型定义颜色。RGB颜色值指定为：rgb（红色，绿色，蓝

色）。每个参数定义该颜色的强度，可以是0到255之间的整数或百分比值（从0％到100％）。例如，

rgb(0,0,255)值呈现为蓝色，因为蓝色参数设置为其最高值（255），其他值设置为0。 rgb( red, green, blue)

red将红色强度定义为0到255之间的整数，或者为0％到100％之间的百分比值

green

blue

1 p1 {

2 background-color : rgb ( 255 , 0 , 0 );

3 }

（2）rgba()带透明度的颜色

rgb( red, green, blue,alpha)

alpha 将不透明度定义为0.0（完全透明）和1.0（完全不透明）之间的数字

1 p1 {

2 background-color : rgb ( 255 , 0 , 0 , 0.3 );

3 }

（3）hsl()颜色

hsl()函数使用Hue-saturation-lightness模型（HSL）定义颜色。HSL代表色调，饱和度和亮度 -

表示颜色的圆柱坐标表示

hsl(hue, saturation, lightness)

hue 定义色轮上的度数（从0到360） - 0（或360）为红色，120为绿色，240为蓝色

saturation 定义饱和度; 0％是灰色阴影，100％是全色（完全饱和度）

lightness 定义亮度;

1 div {

2 width : 100px ;

3 height : 100px ;

4 background : red ;

5 transition : width 2s ;

6 transition-timing-function : hsl ( 0.1 , 0.7 , 1.0 , 0.1 );

7 }

（4）hlsa()带透明度颜色

hsla(hue, saturation, lightness, alpha)

alpha 将不透明度定义为介于0.0（完全透明）和1.0（完全不透明）之间的数字

5.比较大小函数

（1）max()最大值

从一个逗号分隔的表达式列表中选择最大（正方向）的值作为属性的值

可以用于以下场合 <length>, <frequency>, <angle>, <time>, <percentage>, <number>, 或

<integer>

1 /* property: max(expression [, expression]) */

2 width : max ( 10vw , 4em , 80px );

（2）min()最小值

从逗号分隔符表达式中选择一个最小值作为 CSS 的属性值。min() 方法可以用于以下任何属性中

<length>, <frequency>, <angle>, <time>, <percentage>,<number>, 或者 <integer>。

1 /* property: min(expression [, expression]) */

2 width : min ( 1vw , 4em , 80px );

（3）minmax()网格布局

定义了一个长宽范围的闭区间，它与CSS 网格布局一起使用。

此函数包含两个参数，最小值 和 最大值.

1 /* <inflexible-breadth>, <track-breadth> values */

2 minmax ( 200px , 1fr )

3 minmax ( 400px , 50% )

4 minmax ( 30% , 300px )

5 minmax ( 100px , max-content )

6 minmax ( min-content , 400px )

7 minmax ( max-content , auto )

8 minmax ( auto , 300px )

9 minmax ( min-content , auto )

10

11 /* <fixed-breadth>, <track-breadth> values */ 12 minmax ( 200px , 1fr )

13 minmax ( 30% , 300px )

14 minmax ( 400px , 50% )

15 minmax ( 50% , min-content )

16 minmax ( 300px , max-content )

17 minmax ( 200px , auto )

18

19 /* <inflexible-breadth>, <fixed-breadth> values */

20 minmax ( 400px , 50% )

21 minmax ( 30% , 300px )

22 minmax ( min-content , 200px )

23 minmax ( max-content , 200px )

24 minmax ( auto , 300px )

25

（4）fit-content()将给定大小夹紧为可用大小

在自适应屏幕大小中使用

将给定大小夹紧为可用大小

1 /* <length> values */

2 fit-content ( 200px )

3 fit-content ( 5cm )

4 fit-content ( 30vw )

5 fit-content ( 100ch )

6

7 /* <percentage> value */

8 fit-content ( 40% )

该函数可用作 CSS Grid 属性中的 轨道大小 ，其中最大大小由 max-content 定义，最小大小由 auto

定义，其计算方式类似于 auto （即 minmax(auto, max-content) ），只是如果轨道大小大于 auto

最小值，则将其固定在参数处。 即超过fit-content值，就固定在这个值，小于这个值就自适应内容大

小

该函数还可以用作 width 、 height 、 min-width 、 min-height 、 max-width 和 max-height 的

布局框大小，其中最大和最小大小是指内容大小。

6.渐变函数

（1）linear-gradient()线性渐变

用于创建一个表示两种或多种颜色线性渐变的图片。其结果属于<gradient>数据类型，是一种特别的

<image>数据类型。

1 /* 渐变轴为 45 度，从蓝色渐变到红色 */

2 linear-gradient ( 45deg , blue , red ); 用角度值指定渐变的方向（或角度）。角度顺时针增加

3

4 /* 从右下到左上、从蓝色渐变到红色 */

5 linear-gradient ( to left top , blue , red );

6 描述渐变线的起始点位置。它包含 to 和两个关键词：第一个指出水平位置 left or right ，第二个指出垂

直位置 top or bottom 。关键词的先后顺序无影响，且都是可选的。 to top , to bottom , to left 和

to right 这些值会被转换成角度 0 度、 180 度、 270 度和 90 度。其余值会被转换为一个以向顶部中央

方向为起点顺时针旋转的角度。渐变线的结束点与其起点中心对称。

7

8 /* 从下到上，从蓝色开始渐变、到高度 40% 位置是绿色渐变开始、最后以红色结束 */

9 linear-gradient ( 0deg , blue , green 40% , red );

如同其他 gradient 函数一般，linear-gradient() 函数没有内在尺寸；即，它不具备固有的或首选的尺

寸，也不具备首选的比率。该函数的具体尺寸将与其适用的元素尺寸匹配。

利用repeating-linear-gradient (en-US)函数可以实现线形重复渐变效果。

由于<gradient>数据类型系<image>的子数据类型， <gradient>只能被用于<image>可以使用的

地方 。因此， linear-gradient() 并不适用于background-color以及类似的使用 <color>数据类型

的属性中 。

1 linear-gradient ( red , orange , yellow , green , blue );

2 linear-gradient ( red 0% , orange 25% , yellow 50% , green 75% , blue 100% );

默认情况下，从一个颜色的终止点平滑的过渡到另一个颜色的终止点，颜色之间的中点是两个颜色转

换的中点。你可以将中点移动到这两个颜色之间的任意位置，方法是在两个颜色之间添加未标记的

%，以指示颜色的中转位置。下面的示例是从起始点到 10% 的位置标记红色，从 90% 到结束标记蓝

色。在 10% 到 90% 之间，颜色从红色过渡到蓝色，然而过渡的中点是在 30% 的标记上，而不是在

没有 30% 中转点的情况下会默认为 50%。

（2）radial-gradient()径向渐变

radial-gradient()函数将径向渐变设置为背景图像。径向梯度由其中心定义。要创建径向渐变，必

须至少定义两个色标

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

shape 定义渐变的形状 ellipse默认

cricle

size 定义渐变的大小

farthest-corner (默认)

closest-side

closest-corner

farthest-side

position 定义渐变的位置。 默认是“center”

start-color , last-color 颜色停止是您想要渲染平滑过渡的颜色。 该值由颜色值，后跟可选的

停止位置（0％和100％之间的百分比或沿梯度轴的长度）组成

创建一个由重复线性渐变组成的<image>，这是一个类似 linear-gradient (en-US) 的函数，并且采

用相同的参数，但是它会在所有方向上重复渐变以覆盖其整个容器。

1 grad {

background-image : radial-gradient (

red ,

green ,

blue ); }

2

3 grad1 {

background-image : radial-gradient ( closest-side at 60% 55% ,

blue ,

green ,

yellow ,

black ); }

4

5

6 grad2 {

background-image : radial-gradient ( farthest-side at 60% 55% ,

blue ,

green , yellow ,

black ); }

7

（3）repeating-linear-gradient()重复线性渐变

1 /* 一个倾斜 45 度的重复线性渐变，从蓝色开始渐变到红色 */

2 repeating-linear-gradient ( 45deg , blue , red );

3

4 /* 一个从右下角到左上角的重复线性渐变，从蓝色开始渐变到红色 */

5 repeating-linear-gradient ( to left top , blue , red );

6

7 /* 一个由下至上的重复线性渐变，从蓝色开始， 40% 后变绿，最后渐变到红色 */ 8 repeating-linear-gradient ( 0deg , blue , green 40% , red );

9

（4）repeating-radial-gradient()重复径向渐变

创建一个从原点辐射的重复渐变组成的<image> 。它类似于radial-gradient (en-US) 并且采用相同

的参数，但是它会在所有方向上重复颜色，以覆盖其整个容器。

1 /* 一个从容器中心点开始的重复渐变，

2 从红色开始，渐变到蓝色，再渐变到绿色 */

3 repeating - radial - gradient ( circle at center , red 0 , blue , green 30px );

4

7.三角函数和指数函数

（1）acos()反余弦值

acos() 为三角函数，返回介于 -1 和 1 之间的数的反余弦值。此函数含有单个计算式，此式返回表示

介于 0deg 和 180deg 之间的 <angle> 的弧度数。

1 /* 单个 <number> 值 */

2 transform : rotate ( acos ( -0.2 ));

3 transform : rotate ( acos ( 2 * 0.125 ));

4

5 /* 其他值 */

6 transform : rotate ( acos ( pi / 5 ));

7 transform : rotate ( acos ( e / 3 ));

8

（2）asin()反正弦值

asin() 为三角函数，返回介于 -1 和 1 之间的数的反正弦值。此函数含有单个计算式，此式返回表示介

于 -90deg 和 90deg 之间的 <angle> 的弧度数。

1 /* 单个 <number> 值 */

2 transform : rotate ( asin ( -0.2 ));

3 transform : rotate ( asin ( 2 * 0.125 ));

4 5 /* 其他值 */

6 transform : rotate ( asin ( pi / 5 ));

7 transform : rotate ( asin ( e / 3 ));

8

（3）atan()反正切值

atan() 为三角函数，返回介于 -∞ 和 +∞ 之间的数的反正切值。此函数含有单个计算式，此式返回表

示介于 -90deg 和 90deg 之间的 <angle> 的弧度数。

1 /* 单个 <number> 值 */

2 transform : rotate ( atan ( 1 ));

3 transform : rotate ( atan ( 4 * 50 ));

4

5 /* 其他值 */

6 transform : rotate ( atan ( pi / 2 ));

7 transform : rotate ( atan ( e * 3 ));

8

（4）atan2()反正切值

atan2() 为三角函数，返回介于 -infinity 和 infinity 之间的两值的反正切值。此函数接受两个参数，返

回表示介于 -180deg 和 180deg 之间的 <angle> 的弧度数。

1 /* 两个 <number> 值 */

2 transform : rotate ( atan2 ( 3 , 2 ));

3

4 /* 两个 <dimension> 值 */

5 transform : rotate ( atan2 ( 1rem , -0.5rem ));

6

7 /* 两个 <percentage> 值 */

8 transform : rotate ( atan2 ( 20% , -30% ));

9

10 /* 其他值 */

11 transform : rotate ( atan2 ( pi , 45 ));

12 transform : rotate ( atan2 ( e , 30 ));

（5）cos()余弦值

cos() 为三角函数，返回某数的余弦值，此值介于 -1 和 1 之间。此函数含有单个计算式，此式须将参

数结果按弧度数解析为 <number> 或 <angle>，即 cos(45deg)、cos(0.125turn) 和 cos(3.14159 /

4) 均表示同一值，约为 0.707。

1 /* 单个 <angle> 值 */

2 width : calc ( 100px * cos ( 45deg ));

3 width : calc ( 100px * cos ( 0.125turn ));

4 width : calc ( 100px * cos ( 0.785398163rad ));

5

6 /* 单个 <number> 值 */

7 width : calc ( 100px * cos ( 63.673 ));

8 width : calc ( 100px * cos ( 2 * 0.125 ));

9

10 /* 其他值 */

11 width : calc ( 100px * cos ( pi ));

12 width : calc ( 100px * cos ( e / 2 ));

13

（6）exp() e 的指定次方

CSS 函数 exp() 为指数型函数，以数值为参数，返回数学常数 e 的指定次方。

数学常数 e 为自然对数的底数，约为 2.718281828459045。

exp(number) 函数含有单个计算式，此式返回与 pow(e, number) 相同的值。

1 /* <number> 值 */

2 width : calc ( 100px * exp ( -1 )); /* 100px * 0.367879441171442 = 36px */

3 width : calc ( 100px * exp ( 0 )); /* 100px * 1 = 100px */

4 width : calc ( 100px * exp ( 1 )); /* 100px * 2.718281828459045 = 217px */

5

（7）hypot()平方和的平方根

CSS 函数 hypot() 为指数型函数，返回其参数平方和的平方根。

尽管 pow 和 sqrt 仅作用于无单位数值，然而 hypot() 可接受带单位的值，但是这些值须全部具有相

同类型。 1 /* <number> 值 */

2 width : hypot ( 2em ); /* 2em */

3 width : hypot ( 3em , 4em ); /* 5em */

4 width : hypot ( 30px , 40px ); /* 50px */

5 width : hypot ( 48px , 64px ); /* 80px */

6 width : hypot ( 3px , 4px , 5px ); /* 7.0710678118654755px */

7

（8）log()对数

CSS 函数 log() 为指数型函数，返回某数的对数。

1 /* <number> 值 */

2 width : calc ( 100px * log ( 7.389 )); /* 200px */

3 width : calc ( 100px * log ( 8 , 2 )); /* 300px */

4 width : calc ( 100px * log ( 625 , 5 )); /* 400px */

5

（9）pow()次方

CSS 函数 pow() 为指数型函数，返回底数的某数次方的值。

1 /* <number> 值 */

2 width : calc ( 10px * pow ( 5 , 2 )); /* 10px * 25 = 250px */

3 width : calc ( 10px * pow ( 5 , 3 )); /* 10px * 125 = 1250px */

4 width : calc ( 10px * pow ( 2 , 10 )); /* 10px * 1024 = 10240px */

5

（10）sin()正弦值

CSS 函数 sin() 为三角函数，返回某数的正弦值，此值介于 -1 和 1 之间。此函数含有单个计算式，此

式须将参数结果按弧度数解析为 <number> 或 <angle>，即 sin(45deg)、sin(0.125turn) 和

sin(3.14159 / 4) 均表示同一值，约为 0.707。

1 /* 单个 <angle> 值 */

2 width : calc ( 100px * sin ( 45deg )); 3 width : calc ( 100px * sin ( 0.25turn ));

4 width : calc ( 100px * sin ( 1.0471967rad ));

5

6 /* 单个 <number> 值 */

7 width : calc ( 100px * sin ( 63.673 ));

8 width : calc ( 100px * sin ( 2 * 0.125 ));

9

10 /* 其他值 */

11 width : calc ( 100px * sin ( pi / 2 ));

12 width : calc ( 100px * sin ( e / 4 ));

13

（11）sqrt()平方根

CSS 函数 sqrt() 为指数型函数，返回某数的平方根。

1 /* <number> 值 */

2 width : calc ( 100px * sqrt ( 9 )); /* 300px */

3 width : calc ( 100px * sqrt ( 25 )); /* 500px */

4 width : calc ( 100px * sqrt ( 100 )); /* 1000px */

5

（12）tan()正切

CSS 函数 tan() 为三角函数，返回某数的正切值，此值介于 −infinity 和 infinity 之间。此函数含有单

个计算式，此式须将参数结果按弧度数解析为 <number> 或 <angle>。

1 /* 单个 <angle> 值 */

2 width : calc ( 100px * tan ( 45deg ));

3 width : calc ( 100px * tan ( 0.125turn ));

4 width : calc ( 100px * tan ( 0.785398163rad ));

5

6 /* 单个 <number> 值 */

7 width : calc ( 100px * tan ( 0.5773502 ));

8 width : calc ( 100px * tan ( 1.732 – 1 ));

9

10 /* 其他值 */

11 width : calc ( 100px * tan ( pi / 3 )); 12 width : calc ( 100px * tan ( e ));

13

8.cubic-bezier()赛贝尔函数

cubic-bezier()函数定义了Cubic Bezier曲线。Cubic Bezier曲线由四个点P0，P1，P2和P3定义。

P0和P3是曲线的起点和终点，在CSS中，这些点是固定的，因为坐标是比率。P0是（0,0）并且表示初

始时间和初始状态，P3是（1,1）并且表示最终时间和最终状态。

cubic-bezier()函数可以与animation-timing-function属性和transition-timing-function属

性一起使用

1 cubic-bezier ( x1 , y1 , x2 , y2 )

2 div {

3 width : 100px ;

4 height : 100px ;

5 background : red ;

6 transition : width 2s ;

7 transition-timing-function : cubic-bezier ( 0.1 , 0.7 , 1.0 , 0.1 );

8 }

9.path()

接受 SVG 路径字符串，并在 CSS 形状和 CSS 运动路径中使用，以启用要绘制的形状。 在 offset-path、 clip-path属性中使用

10.repeat()网格布局重复函数

表示轨道列表的重复片段，允许以更紧凑的形式写入大量显示重复模式的列或行。

该函数可以用于 CSS Grid 属性中 grid-template-columns 和 grid-template-rows.

1 /* <track-repeat> values */

2 repeat ( 4 , 1fr )

3 repeat ( 4 , [col-start] 250px [col-end] )

4 repeat ( 4 , [col-start] 60% [col-end] )

5 repeat ( 4 , [col-start] 1fr [col-end] )

6 repeat ( 4 , [col-start] min-content [col-end] )

7 repeat ( 4 , [col-start] max-content [col-end] )

8 repeat ( 4 , [col-start] auto [col-end] )

9 repeat ( 4 , [col-start] minmax ( 100px , 1fr ) [col-end] )

10 repeat ( 4 , [col-start] fit-content ( 200px ) [col-end] )

11 repeat ( 4 , 10px [col-start] 30% [col-middle] auto [col-end] )

12 repeat ( 4 , [col-start] min-content [col-middle] max-content [col-end] )

13

14 /* <auto-repeat> values */

15 repeat ( auto-fill , 250px )

16 repeat ( auto-fit , 250px )

17 repeat ( auto-fill , [col-start] 250px [col-end] )

18 repeat ( auto-fit , [col-start] 250px [col-end] )

19 repeat ( auto-fill , [col-start] minmax ( 100px , 1fr ) [col-end] )

20 repeat ( auto-fill , 10px [col-start] 30% [col-middle] 400px [col-end] )

21

22 /* <fixed-repeat> values */

23 repeat ( 4 , 250px )

24 repeat ( 4 , [col-start] 250px [col-end] ) 25 repeat ( 4 , [col-start] 60% [col-end] )

26 repeat ( 4 , [col-start] minmax ( 100px , 1fr ) [col-end] )

27 repeat ( 4 , [col-start] fit-content ( 200px ) [col-end] )

28 repeat ( 4 , 10px [col-start] 30% [col-middle] 400px [col-end] )

29

11.url()资源

CSS 数据类型 <url> 指向一个资源。它没有独有的表达形式，只能通过 url() 函数定义。

许多 CSS 属性 将 URL 作为属性值，例如 background-image、cursor、@font-face、list-style 等

1 <CSS 属性 > : url ( "http://mysite.example.com/mycursor.png" )

2

3 <CSS 属性 > : url ( http://mysite.example.com/mycursor.png )

4

5 .topbanner { background : url ( "topbanner.png" ) #00D no-repeat fixed ; }

6

7 ul { list-style : square url ( http://www.example.com/redball.png ) }

8

12.env()用户代理定义的环境变量值插入你的 CSS 中

env() CSS 函数以类似于 var 函数和 custom properties 的方式将用户代理定义的环境变量值插入你

的 CSS 中。区别在于， 环境变量除了由用户代理定义而不是由用户定义外 ，还 被全局作用在文档中 ，

而 自定义属性则限定在声明它们的元素中 。为了告诉浏览器使用屏幕上所有的可用空间，并以此使用

env()变量，我们需要添加一个新的视口元值：

1 < meta name =" viewport " content =" ... viewport-fit=cover ">

2

3 body {

4 padding:

5 env(safe-area-inset-top, 20px)

6 env(safe-area-inset-right, 20px)

7 env(safe-area-inset-bottom, 20px)

8 env(safe-area-inset-left, 20px);

9 }

另外，与自定义属性不同，自定义属性不能在声明之外使用，而 env()函数可以代替属性值或描述符的

任何部分（例如，在 媒体查询的规则 中）。随着规范的发展，它也可能在像是 选择器 等其他地方使 用。

最初由 iOS 浏览器提供，用于允许开发人员将其内容放置在视口的安全区域中，该规范中定义的

safe-area-inset-* 值可用于确保内容即使在非矩形的视区中也可以完全显示。

1 /* Using the four safe area inset values with no fallback values */

2 env ( safe-area-inset-top );

3 env ( safe-area-inset-right );

4 env ( safe-area-inset-bottom );

5 env ( safe-area-inset-left );

6

7 /* Using them with fallback values */ 第二个值是备用值

8 env ( safe-area-inset-top , 20px );

9 env ( safe-area-inset-right , 1em );

10 env ( safe-area-inset-bottom , 0.5vh );

11 env ( safe-area-inset-left , 1.4rem );

12

safe-area-inset-*由四个定义了视口边缘内矩形的 top, right, bottom 和 left 的环境变量组成，这样

可以安全地放入内容，而不会有被非矩形的显示切断的风险。对于矩形视口，例如普通的笔记本电脑

显示器，其值等于零。对于非矩形显示器（如圆形表盘，iPhoneX 屏幕），在用户代理设置的四个值

形成的矩形内，所有内容均可见。

13.counter()

函数 counter()，返回一个代表计数器的当前值的字符串。它通常和伪元素搭配使用，但是理论上可以

在支持<string>值的任何地方使用。

1 /* 简单使用 */

2 counter ( 计数器名称 );

3

4 /* 更改计数器显示 */

5 counter ( countername , upper - roman )

6

14.counters()

函数 counters() 是一个嵌套计数器，返回表示指定计数器当前值的连接字符串。counters() 函数有两

种形式：counters(name, string) 或 counters(name, string, style)。它通常和伪元素搭配使用，但是

理论上可以在支持<string>值的任何地方使用。生成的文本是具有给定名称的所有计数器的值，从最

外层到最内层，之间由指定字符串分隔。计数器以指示的样式呈现，如果未指定样式，则默认为十进

制。

1 /* Simple usage - style defaults to decimal */

2 counters ( countername , '-' );

3

4 /* changing the counter display */

5 counters ( countername , '.' , upper - roman )

6

15.cross-fade()

cross-fade() CSS 函数可用于以定义的透明度混合两个或多个图像。它可用于许多简单的图像处理，

例如用纯色对图像着色，或者通过将图像与径向渐变组合来突出显示页面的特定区域。

1 cross - fade ( url ( white . png ) 0 % , url ( black . png ) 100 % ); /* fully black */

2 cross - fade ( url ( white . png ) 25 % , url ( black . png ) 75 % ); /* 25% white, 75% black */

3 cross - fade ( url ( white . png ) 50 % , url ( black . png ) 50 % ); /* 50% white, 50% black */

4 cross - fade ( url ( white . png ) 75 % , url ( black . png ) 25 % ); /* 75% white, 25% black */

5 cross - fade ( url ( white . png ) 100 % , url ( black . png ) 0 % ); /* fully white */

6 cross - fade ( url ( green . png ) 75 % , url ( red . png ) 75 % ); /* both green and red at 75% */

7