CSS has the following functions:
| function | description | CSS version |
|---|---|---|
| attr() | Returns the value of an element selected attribute. | 2 |
| calc() | CSS allows calculation of property values, such as dynamic calculated length value. | 3 |
| linear-gradient() | Create an image of a linear gradient | 3 |
| redial-gradient() | Create an image with a radial gradient. | 3 |
| repeating-linear-gradient() | Create a duplicate image with a linear gradient. | 3 |
| repeating-radial-gradient() | Similar radial-gradient (), the image created by repeated radial gradient. | 3 |
attr()
attr () function returns the attribute value of the element selected.
Example: Inserts behind each link:
a:after {
content: " (" attr(href) ")";
}calc()
Calc () function is used to dynamically calculate the length value.
- It is noted that, before and after the arithmetic operator needs to leave a space, for example:
width: calc(100% - 10px); - Any length values may be used Calc () function is calculated;
- Calc () function supports "+", "-", "*", "/" operation;
- Calc () function mathematical operation priority rules using the standard;
Example: Use Calc () function calculates the <div> element width:
#div1 {
position: absolute;
left: 50px;
width: calc(100% - 100px);
border: 1px solid black;
background-color: yellow;
padding: 5px;
text-align: center;
}linear-gradient()
linear-gradient () function to create a linear gradient of an "image." To create a linear gradient, you need to set a starting point and a direction (specified as an angle) transition effects. You have to define the end color. End color that you want to Gecko smooth transition, and you must specify at least two, of course, will be specified more colors to create more complex gradients.
CSS syntax
background: linear-gradient(direction, color-stop1, color-stop2, ...);| value | description |
|---|---|
| direction | Specified angle with the direction of the gradient value (or angle). |
| color-stop1, color-stop2,... | It is used to specify the starting and ending gradient color. |
Example: The following example demonstrates a linear gradient from the left, and from the beginning red, to 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); /* 标准语法 */
}effect:
Example: The following example demonstrates linear gradient from upper left to lower right corner:
#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); /* 标准语法 */
}effect:
Example: The following example demonstrates a linear gradient specified angle:
#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); /* 标准语法 */
}effect:
Example: The following example demonstrates multiple end color:
#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);
}effect:
Example: The following example uses transparency
#grad {
/*Safari 5.1-6*/
background: -webkit-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1));
/*Opera 11.1-12*/
background: -o-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /*Fx 3.6-15*/
background: -moz-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1));
/*Standard*/
background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}effect:
radial-gradient()
radial-gradient() 函数用径向渐变创建 "图像"。径向渐变由中心点定义。为了创建径向渐变你必须设置两个终止色。
CSS 语法
background: radial-gradient(shape size at position, start-color, ..., last-color);| 值 | 描述 |
|---|---|
| shape | 确定圆的类型:
|
| size | 定义渐变的大小，可能值：
|
| position | 定义渐变的位置。可能值：
|
| start-color, ..., last-color | 用于指定渐变的起止颜色。 |
实例：颜色结点不均匀分布
#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);
}效果：
repeating-linear-gradient()
repeating-linear-gradient() 函数用于创建重复的线性渐变 "图像"。
CSS 语法
background: repeating-linear-gradient(angle | to side-or-corner, color-stop1, color-stop2, ...);| Value | 描述 |
|---|---|
| angle | 定义渐变的角度方向。从 0deg 到 360deg，默认为 180deg。 |
| side-or-corner | 指定线性渐变的起始位置。由两个关键字组成：第一个为指定水平位置(left 或 right)，第二个为指定垂直位置（top 或bottom）。 顺序是随意的，每个关键字都是可选的。 |
| color-stop1, color-stop2,... | 指定渐变的起止颜色，由颜色值、停止位置（可选，使用百分比指定）组成。 |
实例：不同的重复线性渐变
#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%); /* 标准语法 (必须在最后) */
}效果：
repeating-radial-gradient()
类似 radial-gradient()，用重复的径向渐变创建图像。