CSS函数

CSS, Web设计 / 作者： / / 发表评论 / CSS, 函数

1、attr()

1）定义与用法

返回选择元素的属性值。支持版本：CSS2

2）语法

attr(attribute-name)

参数：

attribute-name：必须。HTML 元素的属性名

3）举例

1
2
3
a:after {
    content: " (" attr(href) ")";
}

2、calc()

1）定义与用法

动态计算长度值。支持版本：CSS3

  • 需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% – 10px)
  • 任何长度值都可以使用calc()函数进行计算
  • calc()函数支持 “+”, “-“, “*”, “/” 运算
  • calc()函数使用标准的数学运算优先级规则

2）语法

calc(expression)

参数：

expression：必须，一个数学表达式，结果将采用运算后的返回值

3）举例

1
2
3
4
5
6
7
8
9
#div1 {
    position: absolute;
    left: 50px;
    width: calc(100% - 100px);
    border: 1px solid black;
    background-color: yellow;
    padding: 5px;
    text-align: center;
}

3、linear-gradient()

1）定义与用法

用于创建一个线性渐变的 “图像”。支持版本：CSS3

为了创建一个线性渐变，你需要设置一个起始点和一个方向（指定为一个角度）的渐变效果。你还要定义终止色。终止色就是你想让Gecko去平滑的过渡，并且你必须指定至少两种，当然也会可以指定更多的颜色去创建更复杂的渐变效果

2）语法

background: linear-gradient(direction, color-stop1, color-stop2, …);

参数：

direction：用角度值指定渐变的方向（或角度）

color-stop1, color-stop2,…：用于指定渐变的起止颜色

3）举例

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
#grad {
    background: -webkit-linear-gradient(red,yellow,blue); /* Safari 5.1-6.0 */    background: -o-linear-gradient(red,yellow,blue); /* Opera 11.1-12.0 */
    background: -moz-linear-gradient(red,yellow,blue); /* Firefox 3.6-15 */    background: linear-gradient(red,yellow,blue); /* 标准语法 */}
 
#grad {
  background: -webkit-linear-gradient(left, red , blue); /* Safari 5.1 to 6.0 */  background: -o-linear-gradient(right, red, blue); /* Opera 11.1 to 12.0 */  background: -moz-linear-gradient(right, red, blue); /* Firefox 3.6 to 15 */  background: linear-gradient(to right, red , blue); /* 标准语法 */}
 
#grad {
  background: -webkit-linear-gradient(left top, red , blue); /* Safari 5.1 to 6.0 */  background: -o-linear-gradient(bottom right, red, blue); /* Opera 11.1 to 12.0 */  background: -moz-linear-gradient(bottom right, red, blue); /* Firefox 3.6 to 15 */  background: linear-gradient(to bottom right, red , blue); /* 标准语法 */}
 
#grad {
  background: -webkit-linear-gradient(180deg, red, blue); /* Safari 5.1 to 6.0 */  background: -o-linear-gradient(180deg, red, blue); /* Opera 11.1 to 12.0 */  background: -moz-linear-gradient(180deg, red, blue); /* Firefox 3.6 to 15 */  background: linear-gradient(180deg, red, blue); /* 标准语法 */}
 
#grad {
  /* For Safari 5.1 to 6.0 */  background: -webkit-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
  /* For Opera 11.1 to 12.0 */  background: -o-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
  /* For Fx 3.6 to 15 */  background: -moz-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
  /* 标准语法 */  background: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
}
 
#grad {
  background: -webkit-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1)); /*Safari 5.1-6*/  background: -o-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /*Opera 11.1-12*/  background: -moz-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /*Fx 3.6-15*/  background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /*Standard*/}

4、radial-gradient()

1）定义与用法

用径向渐变创建 “图像”，径向渐变由中心点定义。为了创建径向渐变你必须设置两个终止色。支持版本：CSS3

2）语法

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

参数：

shape：确定圆的类型:

  • ellipse (默认): 指定椭圆形的径向渐变
  • circle ：指定圆形的径向渐变

size：定义渐变的大小，可能值：

  • farthest-corner (默认) : 指定径向渐变的半径长度为从圆心到离圆心最远的角
  • closest-side ：指定径向渐变的半径长度为从圆心到离圆心最近的边
  • closest-corner ： 指定径向渐变的半径长度为从圆心到离圆心最近的角
  • farthest-side ：指定径向渐变的半径长度为从圆心到离圆心最远的边

position：定义渐变的位置。可能值：

  • center（默认）：设置中间为径向渐变圆心的纵坐标值
  • top：设置顶部为径向渐变圆心的纵坐标值
  • bottom：设置底部为径向渐变圆心的纵坐标值

start-color, …, last-color：用于指定渐变的起止颜色

3）举例

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
#grad {
  background: -webkit-radial-gradient(red, green, blue); /* Safari 5.1- 6.0 */  background: -o-radial-gradient(red, green, blue); /* Opera 11.6-12.0 */  background: -moz-radial-gradient(red, green, blue); /* Firefox 3.6-15 */  background: radial-gradient(red, green, blue); /* 标准语法 */}
 
#grad {
  background: -webkit-radial-gradient(red 5%, green 15%, blue 60%); /* Safari 5.1-6.0 */  background: -o-radial-gradient(red 5%, green 15%, blue 60%); /* Opera 11.6-12.0 */  background: -moz-radial-gradient(red 5%, green 15%, blue 60%); /* Firefox 3.6-15 */  background: radial-gradient(red 5%, green 15%, blue 60%); /* 标准语法 */}
 
#grad {
  background: -webkit-radial-gradient(circle, red, yellow, green); /* Safari */  background: -o-radial-gradient(circle, red, yellow, green); /* Opera 11.6 to 12.0 */  background: -moz-radial-gradient(circle, red, yellow, green); /* Firefox 3.6 to 15 */  background: radial-gradient(circle, red, yellow, green); /* 标准语法 */}
 
#grad1 {
  /* Safari 5.1 to 6.0 */  background: -webkit-radial-gradient(60% 55%, closest-side,blue,green,yellow,black);
  /* For Opera 11.6 to 12.0 */  background: -o-radial-gradient(60% 55%, closest-side,blue,green,yellow,black);
  /* For Firefox 3.6 to 15 */  background: -moz-radial-gradient(60% 55%, closest-side,blue,green,yellow,black);
  /* 标准语法 */  background: radial-gradient(closest-side at 60% 55%,blue,green,yellow,black);
}
  
#grad2 {
  /* Safari 5.1 to 6.0 */  background: -webkit-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black);
  /* Opera 11.6 to 12.0 */
  background: -o-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black);
  /* For Firefox 3.6 to 15 */  background: -moz-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black);
  /* 标准语法 */  background: radial-gradient(farthest-side at 60% 55%,blue,green,yellow,black);
}

5、repeating-linear-gradient()

1）定义与用法

用于创建重复的线性渐变 “图像”。支持版本：CSS3

2）语法

background: repeating-linear-gradient(angle | to side-or-corner, color-stop1, color-stop2, …);

参数：

angle：定义渐变的角度方向。从 0deg 到 360deg，默认为 180deg

side-or-corner：指定线性渐变的起始位置。由两个关键字组成：第一个为指定水平位置(left 或 right)，第二个为指定垂直位置（top 或bottom）。 顺序是随意的，每个关键字都是可选的

color-stop1, color-stop2,…：指定渐变的起止颜色，由颜色值、停止位置（可选，使用百分比指定）组成

3）举例

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
#grad1 {
  /* Safari 5.1 to 6.0 */  background: -webkit-repeating-linear-gradient(red, yellow 10%, green 20%);
  /* Opera 11.1 to 12.0 */  background: -o-repeating-linear-gradient(red, yellow 10%, green 20%);
  /* Firefox 3.6 to 15 */  background: -moz-repeating-linear-gradient(red, yellow 10%, green 20%);
  /* 标准语法 */  background: repeating-linear-gradient(red, yellow 10%, green 20%);
}
 
#grad1 {
    height: 200px;
    background: -webkit-repeating-linear-gradient(45deg,red,blue 7%,green 10%); /* For Safari 5.1 to 6.0 */    background: -o-repeating-linear-gradient(45deg,red,blue 7%,green 10%); /* For Opera 11.1 to 12.0 */    background: -moz-repeating-linear-gradient(45deg,red,blue 7%,green 10%); /* For Firefox 3.6 to 15 */    background: repeating-linear-gradient(45deg,red,blue 7%,green 10%); /* 标准语法 (必须在最后) */}
  
#grad2 {
    height: 200px;
    background: -webkit-repeating-linear-gradient(190deg,red,blue 7%,green 10%); /* For Safari 5.1 to 6.0 */    background: -o-repeating-linear-gradient(190deg,red,blue 7%,green 10%); /* For Opera 11.1 to 12.0 */    background: -moz-repeating-linear-gradient(190deg,red,blue 7%,green 10%); /* For Firefox 3.6 to 15 */    background: repeating-linear-gradient(190deg,red,blue 7%,green 10%); /* 标准语法 (必须在最后) */}
  
#grad3 {
    height: 200px;
    background: -webkit-repeating-linear-gradient(90deg,red,blue 7%,green 10%); /* For Safari 5.1 to 6.0 */    background: -o-repeating-linear-gradient(); /* For Opera 11.1 to 12.0 */    background: -moz-repeating-linear-gradient(90deg,red,blue 7%,green 10%); /* For Firefox 3.6 to 15 */    background: repeating-linear-gradient(90deg,red,blue 7%,green 10%); /* 标准语法 (必须在最后) */}

6、repeating-radial-gradient()

类似 radial-gradient()，用重复的径向渐变创建图像

7、浏览器兼容

函数CSS函数插图CSS函数插图2CSS函数插图4CSS函数插图6CSS函数插图8
attr()2.08.01.03.19.0
calc()26.0
19.0 -webkit-		9.016.0
4.0 -moz-		7.0
6.0 -webkit-		15.0
linear-gradient()26.0
10.0 -webkit-		10.016.0
3.6 -moz-		6.1
5.1 -webkit-		12.1
11.1 -o-
radial-gradient()26.0
10.0 -webkit-		10.016.0
3.6 -moz-		6.1
5.1 -webkit-		12.1
11.6 -o-
repeating-linear-gradient()26.0
10.0 -webkit-		10.016.0
3.6 -moz-		6.1
5.1 -webkit-		12.1
11.1 -o-
repeating-radial-gradient()26.0
10.0 -webkit-		10.016.0
3.6 -moz-		6.1
5.1 -webkit-		12.1
11.6 -o-
打赏微海报分享

相关文章

发表评论

欢迎阅读『CSS函数|CSS、Web设计|Nick Tan-梓潼Blog』