CSS

CSS语法规范

CSS规则由两个主要的部分构成：选择器以及一条或多条声明（包括属性和属性值）：

1
2
3

p {
            color: red;
}

CSS选择器

选择器就是根据不同的需求把不同的标签选出来。

选择器分为基础选择器和复合选择器两大类。

基础选择器

基础选择器是由单个选择器组成的。

基础选择器又包括：标签选择器、类选择器、Id选择器和通配符选择器。

标签选择器

标签选择器是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式：

1
2
3

p {
            color: red;
}

类选择器

类指标签中的class。

1
2
3

.类名 {
	属性:属性值;
}

长类名可以使用“-”分割。

注意类名命名规范。

多类名选择器

可以给一个标签指定多个类名，多个类名中间使用空格分开，这样标签就可以具有多个类名的样式。

可以把一些相同的样式放到一个类里。

id选择器

id选择器可以为标有特定id的HTML元素指定特定的样式。

HTML元素以id属性来设置id选择器，CSS中id选择器以”#”来定义。

同一个HTML页面不能出现相同的 id，哪怕他们不是一个类型。

1
2
3

#id名 {
	属性：属性值;
}

通配符选择器

通配符选择器使用“*”定义，表示选取页面中所有标签。

1
2
3

* {
	属性：属性值;
}

复合选择器

复合选择器是建立在基础选择器之上，由两个或多个基础选择器，通过不同的方式组合而成的。

后代选择器

后代选择器可以选择父元素里的子元素。

1
2
3

元素一 元素二 {
	样式声明
}

上述语法表示选择元素一里的所有元素二（包括所有的后代元素）。

元素一和元素二可以是任意基础选择器。

子选择器

子元素选择器只能选择作为某元素的最近一级子元素。

1
2
3

元素1>元素1 {
	样式声明
}

上述语法表示选择元素1里面的所有直接后代（子元素）元素2。

并集选择器

并集选择器可以选择多组标签，同时为他们定义相同的样式。

并集选择器是各选择器通过英文逗号（,）连接而成，任何形式的选择器都可以作为并集选择器的一部分。

1
2
3

元素1,元素2 {
	样式声明
}

上述语法表示选择元素1和元素2。

伪类选择器

伪类选择器用于向某些选择器添加特殊效果，比如给链接添加特殊效果，或选择第1个，第n个元素。

伪类选择器的书写特点是用冒号（:）表示。

链接伪类选择器

• a:link。选择所有未被访问的链接。
• a:visited。选择所有已被访问的链接。
• a:hover。选择鼠标指针位于其上的链接。
• a:active。选择活动链接（鼠标点击未弹起的链接）。

链接伪类应该按顺序书写：link、visited、hover、active。

:focus类选择器

:focus类选择器用于选取获得焦点（焦点就是光标）的表单元素。

字体属性

字体属性用于定义字体系列、大小、粗细和文字样式（如斜体）。

字体系列

CSS使用font-family属性定义文本的文字系列。

可以设置多种字体，先读取前面的字体，各种字体之间使用逗号隔开。

如果有空格隔开的多个单词组成的字体加引号。

可以给body标签指定整个页面文本的文字系列。

字体大小

CSS使用font-size属性定义字体的大小。

单位px（像素）是网页最常用的单位。

不同浏览器默认显示的字号大小可能不一致，我们尽量给一个明确的大小。

可以给body标签指定整个页面文本的文字系列（标题标签比较特殊，需要单独指定文字大小）。

字体粗细

CSS使用font-weight属性设置文本字体的粗细。

属性值：

normal：默认值（不加粗）。

bold：定义粗体（加粗）。

100~900：400等同于normal，而700等同于bold，注意这个数字后面不跟单位。

文字样式

CSS使用font-style设置文本风格。

属性值：
normal：默认值，浏览器显示标准字体样式。

italic：斜体字体样式。

字体复合属性

字体复合属性可以把文字样式综合。

1
2
3

p {
	font: font-style font-weight  font-size/line-height font-family; 
}

书写格式顺序不能变。

不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性。

文本属性

CSS文本属性可定义文本的外观，比如文本的颜色、对齐文本、装饰文本、文本缩进、行间距等。

文本颜色

color属性用于定义文本的颜色。

1
2
3

div {
	color: red;
}

表示形式：

• 预定义的颜色值：例如：red、blue等。
• 十六进制：例如：FF0000
• RGB代码：例如：rgb(255,0,0)或rgb(100%,0%,0%)

文本对齐

text-align属性用于设置元素文本内容的水平对齐方式。

1
2
3

div {
	text-align: center;
}

属性值：

• left：左对齐。
• right：右对齐。
• center：居中对齐。

装饰文本

text-decoration属性规定添加到文本的修饰。可以给文本添加下划线、删除线、上划线等。

1
2
3

div {
	text-decoration: none;
}

属性值：

• none：默认，没有装饰线。
• underline：下划线，链接a自带下划线。
• overline：上划线。
• line-through：删除线。

文本缩进

text-indent属性用来设置元素内文本的第一行的缩进，通常是将段落的首行缩进，可以是负值。

1
2
3

div {
	text-indent: 10px;
}

1
2
3

div {
	text-indent: 10em;
}

em是一个相对单位，就是当前元素（font-size）1个文字的大小，如果当前元素没有设置大小，则会按照父元素的1个文字大小。

行间距

line-height属性用于设置行间的距离（行高）。可以控制文字行与行之间的距离的。

1
2
3

p {
	line-height: 25px;
}

行间距包括上间距、文本高度、下间距。

CSS引入方式

• 内部样式表。内部样式表是写到HTML页面内部，将所有的CSS代码抽取出来，单独放到一个style标签中。
• 行内样式表。行内样式表是在元素标签内部的style属性中设置CSS样式。
• 外部样式表。样式单独写到CSS文件中，在HTML页面中通过link标签引入。

CSS的元素显示模式

元素显示模式就是元素以什么方式进行显示，比如div独占一行，span一行可以放多个。

HTML元素一般分为块元素和行内元素两种类型。

块元素

常见的块元素：h1、p、div、li等。

块元素的特点：

• 独占一行。
• 高度，宽度、外边距和内边距都可以控制。
• 宽度默认是父级宽度的100%。
• 是一个容器，里面可以放行内或者块元素。

注意文字类的元素内不能使用块级元素，比如：p、h1。

行内元素

常见的行内元素：a、span、b、i等。

行内元素的特点：

• 相邻行内元素在一行上，一行可以显示多个。
• 高宽直接设置是无效的。
• 默认宽度就是它本身内容的宽度。
• 行内元素只能容纳文本或其它行内元素。（链接a里可以放块级元素，但是转换一下块级模式更安全）

注意链接里不能放链接。

行内块元素

行内元素中有几个特殊的标签：<img/>、<input/>、<td>，它们同时具有块元素和行内元素的特点。

行内块元素的特点：

• 和相邻行内元素（行内块）在一行上，但是之间会有空隙。一行可以显示多个（行内元素特点）。
• 默认宽度就是它本身内容的宽度（行内元素的特点）。
• 高度，宽度，外边距以及内边距都可以控制（块级元素的特点）。

元素显示模式转换

一个模式需要另外一种模式的特性。

行内元素转换为块级元素：display: block;

块级元素转换为行内元素： display: inline;

转换为行内块元素： display: inline-block;

行内块元素之间会有空白间隙。

背景属性

背景颜色

background-color属性定义了元素的背景颜色。

1

background-color: 颜色;

一般情况下元素的背景颜色默认值是transparent（透明）。

背景图片

background-image属性描述了元素的背景图像，优点是便于控制位置。

参数值：

• none。无背景的（默认）
• url。使用相对或绝对地址指定背景图像。

背景平铺

background-repeat属性可以控制背景图片的平铺效果。

参数值：

• repeat。背景图像在纵向和横向上平铺（默认）。
• no-repeat。背景图像不平铺。
• repeat-x。背景图像在横向平铺。
• repeat-y。背景图像在纵向平铺。

页面元素既可以有背景图片也可以有背景颜色，只不过背景图片会压住背景颜色。

背景图片位置

background-position属性可以改变图片在背景中的位置。

1

background-position: x y;

参数代表的意思是： x坐标和y坐标。可以使用方位名词（top、center、bottom、left、center、right）或者精确单位（百分数、由数字和单位组成的长度值）。

参数是方位名词

如果指定的两个值都是方位名词，则两个值前后顺序无关。

如果只指定了一个方位名词，另一个值省略，则第二个值默认居中对齐。

参数是精确单位

如果参数是精确坐标，那么第一个是x坐标，第二个是y坐标。

如果只指定一个数值，那么该数值是x坐标，另一个默认垂直居中。

参数是混合单位

如果指定的两个值是精确单位和方位名词混合使用，则第一个值是x坐标，第二个值是y坐标。

背景图像固定

background-attachment属性设置背景图像是否固定或者随着页面的其余部分滚动。可以制作视差滚动效果。

参数值：

• scroll。背景图像是随对象内容滚动。（默认）
• fixed。背景图像固定。

背景复合写法

背景属性可以合并简写在一个属性background中。简写属性没有特定书写顺序。但一般按照：

background：背景颜色 背景图片地址 背景平铺 背景图像滚动 背景位置;

背景颜色半透明

背景颜色半透明效果：

1

background: rgba(0,0,0,0.5);

最后一个参数alpha透明度，取值范围在0~1之间。0是百分之百透明，1是百分之百不透明。

背景半透明是指盒子背景半透明，盒子里面的内容不受影响。

CSS的三个特性

层叠性

相同选择器给设置相同的样式，此时一个样式就会覆盖另一个冲突样式。层叠性主要解决样式冲突的问题。

层叠性原则：样式冲突遵循就近原则，哪个样式离结构近就执行哪个样式。

继承性

子标签会继承父标签中的某些样式（text-、font-、line-这些元素开头的可以继承），如文本颜色和字号。

行高的继承性：

1
2
3

p {
	font: font-style font-weight  font-size/line-height font-family; 
}

其中的line-height可以加单位，也可以不加。

如果不加单位则表示一个倍数。

设此数为1.5，如果子元素没有设置行高，则子元素的行高为当前子元素文字大小*1.5。

优先级

当同一个元素指定多个选择器，就会有优先级的产生。

• 选择器相同，则执行层叠性。
• 选择器不同，则根据选择器权重执行。

选择器权重：


权重叠加：如果是复合选择器，则会有权重叠加，需要计算权重（权重不会进位）。

盒子模型

盒子模型就是把HTML页面中的布局元素看做是一个矩形的盒子，也就是一个盛装内容的容器。它包括边框、内边距、外边距、实际内容。

边框（border）

border可以设置元素的边框。边框有三个属性：

• border-width。定义边框粗细，单位是px。
• border-style。边框的样式（实线solid、虚线dashed、点线dotted等）。
• border-color。边框颜色。

border的复合写法（不要求顺序）：

1

border: 1px solid blue;

border边框可以分开写，如：border-top、border-bottom。

边框会额外增加盒子的实际大小。

表格的细线边框

border-collapse属性控制浏览器绘制表格边框的方式，它控制相邻单元格的边框。

1

border-collapse: collapse;

border-collapse: collapse;表示相邻边框合并在一起。

内边距（padding）

padding属性用于设置内边距，即边框与内容之间的距离。

属性：padding-left、padding-right、padding-top、padding-bottom。

简写形式：


padding会额外增加盒子的实际大小。但是如果盒子本身没有指定width/height属性，则此时padding不会撑开盒子大小。

外边距（margin）

margin属性用于设置外边距，即控制盒子与盒子之间的距离。

属性：margin-left、margin-right、margin-top、margin-bottom。

简写方式和padding一致。

行内元素只有设置左右外边距会有作用，上下外边距不会有作用。

外边距可以让块级盒子水平居中，但是必须要满足两个条件：

• 盒子必须制定宽度。
• 盒子左右外边距设为auto。

行内元素和行内块元素可以给其父元素添加text-align：center即可。

使用margin定义块级元素的垂直外边距时，可能会出现外边距的合并（只是上外边距会出现此情况）。

对于两个嵌套关系的块元素，如父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的上外边距值。

解决方案：

1.为父元素定义上边框。

2.为父元素定义上内边距。

3.为父元素添加overflow:hidden。

4.还有其他方法，如浮动、固定、绝对定位的盒子不会有塌陷问题。

可以利用margin设置负值，解决盒子与盒子之间边框紧挨变粗的问题。

清除内外边距

网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致。因此在布局前，首先要清除网页元素的内外边距。

1
2
3
4

* {
	padding: 0;
	margin: 0;
}

圆角边框

border-radius属性用于设置元素的外边框圆角。

1

border-radius:length;

radius半径（圆的半径）原理：圆与边框的交集形成圆角效果。

参数值（显示的效果最值为短边的一半，超过效果不变）可以为数值或百分比（50%为一个椭圆，如果是正方形50%为圆，超过50%的效果仍为50%的效果）。

如果是正方形，想要设置成一个圆，把数值修改为高度或宽度的一半，或写成50%。

该属性是一个简写属性，可以跟四个值，分别表示左上角、右上角、左下角、右下角。

分开写：border-top-left-radius等。

盒子阴影

box-shadow属性可以为盒子添加阴影。

1

box-shadow: h-shadow v-shadow blur spread  color inset;

• h-shadow。必需，水平阴影的位置，允许负值。
• v-shadow。必需，垂直阴影的位置，允许负值。
• blur。可选，模糊距离。
• spread。可选，阴影的尺寸。
• color。可选。阴影的颜色。
• inset。可选，将外部阴影（outset）改为内部阴影。默认的是外部阴影，但是不能写这个词，否则阴影无效。

盒子阴影不占用空间，不会影响其它盒子排列。

文字阴影

text-shadow属性可以设置文字阴影。

1

text-shadow: h-shadow v-shadow blur color;

• h-shadow。必需，水平阴影的位置，允许负值。

• v-shadow。必需，垂直阴影的位置，允许负值。

• blur。可选，模糊距离。

• color。可选。阴影的颜色。

浮动

传统网页布局的三种方式：

• 普通流（标准流、文档流），就是标签按照规定好的默认方式排列。块级元素独占一行，从上向下顺序排列，行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行。
• 浮动。
• 定位。

浮动可以改变元素标签的默认排列方式。

多个块级元素纵向排列用标准列，多个块级元素横向排列用浮动。

float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。

1

选择器 {float: 属性值;}

属性值：

• none，元素不浮动，默认值。
• left，元素向左浮动。
• right，元素向右浮动。

浮动特性：

• 浮动元素会脱离标准流（浮），移动到指定位置（动），即脱标，浮动的盒子不再保留原先的位置。

• 浮动元素会一行内显示并且元素顶部对齐。如果多个盒子都设置了浮动，则它们会按照属性值一行内显示并且顶端对齐排列。

  浮动的元素是互相贴靠在一起的（不会有间隙），如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐。

• 浮动元素会具有行内块元素的特性。任何元素都可以浮动，不管原先是什么模式的元素，添加浮动之后具有行内块元素相似的特性。如果行内元素有了浮动，则不需要转换成块级/行内块元素就可以直接给宽度和高度。如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容来定。

为了约束浮动元素的位置，一般先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置。

一个盒子里面有多个子盒子，如果其中一个盒子浮动了，那么其他兄弟也应该浮动，防止出现其它问题。

浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流。

清除浮动

父级盒子很多情况下不方便给高度，但是子盒子浮动不占有位置，最后父级盒子高度为0时，就会影响下面的标准流盒子。

清除浮动本质：

• 清除浮动的本质是清除浮动元素造成的影响。
• 如果父盒子本身有高度，则不需要清除浮动。
• 清除浮动之后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了。

清除浮动的策略

清除浮动的策略是闭合浮动。只让浮动在父盒子内部影响，不影响父盒子外面的其它盒子。

1

选择器 {clear: 属性值};

属性值：

• left，不允许左侧有浮动元素，清除左侧浮动元素的影响。
• right，不允许右侧有浮动元素，清除右侧浮动元素的影响
• both，同时清除左右两侧浮动的影响（常用）。

清除浮动的方法

额外标签法

额外标签法会在浮动元素末尾添加一个空的标签。例如< div style=”clear:both”></div>,或者其它标签（如<br/>等），这个新的空标签必须是块级元素。

缺点是添加了无意义的标签，结构化较差。

父级添加overflow

给父级元素添加overflow属性，将属性值设置为hidden、auto或scroll。

优点：代码简洁。

缺点：无法显示溢出的部分。

:after伪元素法

:after方式是额外标签法的升级版，给父元素添加：

1
2
3
4
5
6
7
8
9
10
11

.clearfix:after {
	content: "";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
//IE6、7专有
.clearfix {
	*zoom: 1;
}

优点：没有增加额外标签，结构简单。

缺点：照顾低版本浏览器。

双伪元素清除浮动

给父元素添加：

1
2
3
4
5
6
7
8
9
10
11
12

.clearfix:before,
.clearfix:after {
	content: "";
	display: table;
}
.clearfix:after {
	clear: both;
}
//IE6、7专有
.clearfix {
	*zoom: 1;
}

CSS书写顺序


定位

定位：将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子。

定位由定位模式和边偏移组成。定位模式用于指定一个元素在文档中的定位方式，边偏移决定了该元素的最终位置。

定位模式通过position属性设置，属性值：

• static，静态定位。
• relative，相对定位。
• absolute，绝对定位。
• fixed，固定定位。

边偏移有4个属性：

• top，顶端偏移量（相对于父元素），属性值例如：10px。
• right，右侧偏移量（相对于父元素）。
• bottom，低端偏移量（相对于父元素）。
• left，左侧偏移量（相对于父元素）。

静态定位static

静态定位是元素的默认定位方式，无定位的意思。

静态定位按照标准流特性摆放位置，没有边偏移。

相对定位relative

相对定位是元素在移动位置的时候，是相对于它原来的位置。

原来的位置依然保留，后面的盒子仍然以标准流的方式对待它。

绝对定位absolute

绝对定位是元素在移动的时候，是相对于它的祖先元素。

如果没有祖先元素或者祖先元素没有定位，则以浏览器为准进行定位。

如果祖先元素有定位（相对，绝对，固定），则以最近一级的有定位祖先元素为准移动位置。

绝对定位不再占有原先的位置。

自绝父相：子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其它的兄弟盒子。父盒子需要加定位限制子盒子在父盒子内显示，父盒子布局时，需要占有位置，因此父盒子要为相对定位。

固定定位fixed

固定定位是元素固定于浏览器可视区的位置。主要使用场景：可以在浏览器页面滚动时，元素的位置不会改变。

固定定位特点：以浏览器的可视窗口为参照点移动元素，固定定位不在占有原先的位置。

元素固定在版心右侧位置：

1.让固定定位的盒子left：50%，走到浏览器可视区一半的位置。

2.让固定定位的盒子margin-left：版心宽度一半的距离。

粘性定位sticky

粘性定位可以认为是相对定位和固定定位的混合。

特点：以浏览器的可视窗口为参照点移动元素，占有原先的位置，必须添加一个偏移量才有效。

定位叠放次序z-index

在使用定位布局时可能会出现盒子重叠的情况，此时，可以使用z-index来控制盒子的前后次序。

数值可以是正整数，负整数或0，默认是auto，数字越大盒子越靠上。

如果属性值相同，则按照书写顺序，后来居上。

数字后面不能加单位。

只有定位的盒子才有z-index属性。

绝对定位和固定定位的盒子不能通过margin:0 auto实现水平居中，可以通过：

1.left：50%，让盒子的左侧移动到父级元素的水平中心位置。

2.margin-left：-盒子自身宽度一半，让盒子向左移动自身宽度一半。

垂直居中同理。

绝对定位和固定定位与浮动类似：

• 行内元素添加固定或绝对定位，可以直接设置长度和宽度。
• 行块级元素添加固定或绝对定位，如果不给宽度或者高度，默认大小是内容的大小。
• 脱标的盒子不会触发外边距塌陷（浮动元素、绝对、固定定位）。

绝对定位和固定定位会完全压住下面所有的内容，而浮动元素只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字（图片）。因为浮动产生的最初目的是做文字环绕效果的，文字会围绕浮动元素。

元素的显示与隐藏

display

display属性用于设置一个元素如何显示。

display:none;隐藏元素。

display:block;除了转换为块级元素之外，同时还有显示元素的意思。

display隐藏元素后，不再占有原来的位置。

visibility

visibility属性用于指定一个元素可见还是隐藏。

visibility:visible；元素可见。

visibility:hidden；元素隐藏。

visibility隐藏元素后，元素继续占有原来位置。

overflow

overflow属性指定了如果内容溢出一个元素的框时，会发生什么。

属性值：

• visible，不剪切内容也不添加滚动条。
• hidden，不显示超过尺寸的内容，超出的部分隐藏。
• scroll，不管超出内容与否，总是显示滚动条。
• auto，超出显示滚动条，不超出不显示。

精灵图

主要借助于背景图位置实现：background-position。

一般情况下，坐标是负值。

CSS三角

用一个div元素，宽高设置为0，设置边框粗细，样式，颜色，通过控制各边颜色透明与否，显示三角形样式。

CSS用户界面样式

鼠标样式cursor

通过cursor属性设置在对象上移动的鼠标采用什么光标形状。

属性值：

• default,默认，白色箭头。
• pointer，小手。
• move，移动。
• text，文本。
• not-allowed，禁止。

表单点击轮廓线outline

给表单设置outline:0或者outline：none后，可以去掉默认表单点击轮廓线。

防止拖拽文本域resize

设置resize:none，防止拖拽文本域。此外文本域前后标签最好紧挨着。

属性

vertical-align属性用来给图片或表单（行内或行内块元素）设置和文字垂直对齐。

属性值：


解决图片底部默认空白缝隙问题

原因是行内块元素会和文字的基线对齐。

解决方法：

• 给图片添加vertical-align：middle|top|bottom。
• 把图片转换为块级元素display:block，因为块级元素没有vertical-align属性，不会有基线对齐的方式。

单行文本溢出省略号显示

1
2
3
4
5
6

//强制一行内显示文本
white-space:nowrap;（默认normal自动换行）
//超出的部分隐藏
overflow:hidden;
//文字用省略号替代超出的部分
text-overflow:ellipsis;

CSS3新特性

CSS3新增选择器

属性选择器

属性选择器可以根据元素特定属性来选择元素。


属性选择器、类选择器、伪类选择器权重为10。

结构伪类选择器

结构伪类选择器主要根据文档结构来选择元素，常用于根据父级选择里面的子元素。


例如：

1
2
3

li:first-child {
	属性:属性值;
}

nth-child(n)，n可以是数字，关键字（even偶数、odd奇数），公式。

常见公式（如果n是公式，则从0开始计算，但是第0个元素或者超出了元素的个数会被忽略，这里面只能是n，不能是其它字母）：


nth-child会把所有的盒子都排列序号。

执行的时候首先看:nth-child(n)，再看前面的元素。

nth-of-type会把指定元素的盒子排列序号。

执行的时候首先看前面的元素，再看:nth-child(n)。

伪元素选择器

伪元素选择器是利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构。

• ::before，在元素内部的前面插入内容。
• ::after，在元素内部的后面插入内容。

before和after创建一个元素，但是属于行内元素。

before和after必须有content属性。

伪元素选择器和标签选择器权重一样为1.

CSS3盒子模型

CSS3可以通过box-sizing来指定盒模型，属性值：

• box-sizing:content-box，盒子大小为width+padding+border（默认）。
• box-sizing:border-box，盒子大小为width。

如果盒子模型选择box-sizing:border-box，那么padding和border就不会撑大盒子了（前提是padding和border不会超过width宽度）。

CSS3滤镜filter

filter属性将模糊或颜色偏移等图形效果应用于元素。

1

filter: 函数();

CSS3calc函数

calc函数可以在声明CSS属性值时执行一些计算。

1

width: calc(100%-30px);

CSS3过渡

1

transition: 要过渡的属性 花费时间 运动时间 何时开始;

要过渡的属性：想要变化的CSS属性，宽度、高度、颜色等。如果想要所有的属性都变化过渡，可以写all。

花费时间：单位是秒，必须写单位。

运动曲线：默认是ease（可以省略）。

何时开始：单位是秒（必须写单位），可以设置延迟触发时间，默认是0s（可以省略）。

过渡属性写在需要变化的元素上。