CSS 3 基础
CSS 用于控制网页的样式和布局，而CSS3是CSS技术的升级版本，CSS3语言开发是朝着模块化发展的
选择器
CSS选择器用于选择你想要的元素的样式的模式
CSS 3 选择器
基本选择器
层次选择器
伪类选择器
动态伪类选择器
目标伪类选择器
语言伪类选择器
UI 元素状态伪类选择器
结构伪类选择器
否定伪类选择器
伪元素
属性选择器
| 基本选择器 |
类型 |
功能描述 |
| * |
通配选择器 |
选择文档中所有HTML元素 |
| E |
元素选择器 |
选择指定类型的HTML元素 |
| #id |
ID选择器 |
选择指定ID属性值为“id”的任意类型元素 |
| .class |
类选择器 |
选择指定class属性值为“class”的任意类型的任意多个元素 |
| selector1, selectorN |
群组选择器 |
将每一个选择器匹配的元素集合并 |
| 层次选择器 |
类型 |
功能描述 |
| E F |
后代选择器（包含选择器） |
选择匹配的F元素，且匹配的F元素被包含在匹配的E元素内 |
| E>F |
子选择器 |
选择匹配的F元素，且匹配的F元素所匹配的E元素的子元素 |
| E+F |
相邻兄弟选择器 |
选择匹配的F元素，且匹配的F元素紧位于匹配的E元素的后面 |
| E~F |
通用选择器 |
选择匹配的F元素，且位于匹配的E元素后的所有匹配的F元素 |
| 动态伪类选择器 |
类型 |
功能描述 |
| E:link |
链接伪类选择器 |
选择匹配的E元素，而且匹配元素被定义了超链接并未被访问过。常用于链接描点上 |
| E:visited |
链接伪类选择器 |
选择匹配的E元素，而且匹配元素被定义了超链接并已被访问过。常用于链接描点上 |
| E:active |
用户行为选择器 |
选择匹配的E元素，且匹配元素被激活。常用于链接描点和按钮上 |
| E:hover |
用户行为选择器 |
选择匹配的E元素，且用户鼠标停留在元素E上。IE6及以下浏览器仅支持a:hover |
| E:focus |
用户行为选择器 |
选择匹配的E元素，而且匹配元素获取焦点 |
| 目标伪类选择器 |
功能描述 |
| E:target |
选择匹配E的所有元素，且匹配元素被相关URL指向 |
| 元素状态选择器 |
类型 |
功能描述 |
| E:checked |
选中状态伪类选择器 |
匹配选中的复选按钮或者单选按钮表单元素 |
| E:enabled |
启用状态伪类选择器 |
匹配所有启用的表单元素 |
| E:disabled |
不可用状态伪类选择器 |
匹配所有禁用的表单元素 |
| 结构伪类选择器 |
功能描述 |
| E:first-child |
作为父元素的第一个子元素的元素E。与E:nth-child(1)等同 |
| E:last-child |
作为父元素的最后一个子元素的元素E。与E:nth-last-child(1)等同 |
| E:root |
选择匹配元素E所在文档的根元素。在HTML文档中，根元素始终是html，此时该选择器与html类型选择器匹配的内容相同 |
| E F:nth-child(n) |
选择父元素E的第n个子元素F。其中n可以是整数（1，2，3）、关键字（even，odd）、可以是公式（2n+1）,而且n值起始值为1，而不是0 |
| E F:nth-last-child(n) |
选择父元素E的倒数第n个子元素F。此选择器与E:nth-child(n)选择器计算顺序刚好相反，但使用方法都是一样的，其中：nth-last-child(1)始终匹配最后一个元素，与last-child等同 |
| E:nth-of-type(n) |
选择父元素内具有指定类型的第n个E元素 |
| E:nth-last-of-type(n) |
选择父元素内具有指定类型的倒数第n个E元素 |
| E:first-of-type |
选择父元素内具有指定类型的第一个E元素，与E:nth-of-type(1)等同 |
| E:last-of-type |
选择父元素内具有指定类型的最后一个E元素，与E:nth-last-of-type(1)等同 |
| E:only-child |
选择父元素只包含一个子元素，且该子元素匹配E元素 |
| E:only-of-type |
选择父元素只包含一个同类型子元素，且该子元素匹配E元素 |
| E:empty |
选择没有子元素的元素，而且该元素也不包含任何文本节点 |
- ul>li:nth-child(3)”表达的并不是一定选择列表ul元素中的第3个子元素li，仅有列表ul中第3个li元素前不存在其他的元素，命题才有意义，否则不会改变列表第3个li元素的样式
- :nth-child(n) 中参数只能是n，不可以用其他字母代替
- :nth-child(odd) 选择的是奇数项，而使用 :nth-last-child(odd) 选择的却是偶数项
| 否定伪类选择器 |
功能描述 |
| E:not(F) |
匹配所有除元素F外的E元素 |
| 属性选择器 |
功能描述 |
| [attribute] |
用于选取带有指定属性的元素 |
| [attribute=value] |
用于选取带有指定属性和值的元素 |
| [attribute~=value] |
用于选取属性值中包含指定词汇的元素 |
| [attribute|=value] |
用于选取带有以指定值开头的属性值的元素，该值必须是整个单词 |
| [attribute^=value] |
匹配属性值以指定值开头的每个元素 |
| [attribute$=value] |
匹配属性值以指定值结尾的每个元素 |
| [attribute*=value] |
匹配属性值中包含指定值的每个元素 |
样式属性
| 尺寸属性 |
描述 |
CSS |
| height |
设置元素的高度 |
1 |
| max-height |
设置元素的最大高度 |
2 |
| max-width |
设置元素的最大宽度 |
2 |
| min-height |
设置元素的最小高度 |
2 |
| min-width |
设置元素的最小宽度 |
2 |
| width |
设置元素的宽度 |
1 |
| 字体属性 |
说明 |
CSS |
| font |
在一个声明中设置所有字体属性 |
1 |
| font-family |
规定文本的字体系列 |
1 |
| font-size |
规定文本的字体尺寸 |
1 |
| font-style |
规定文本的字体样式 |
1 |
| font-variant |
规定文本的字体样式 |
1 |
| font-weight |
规定字体的粗细 |
1 |
| 文本属性 |
说明 |
CSS |
| color |
设置文本的颜色 |
1 |
| direction |
规定文本的方向 / 书写方向 |
2 |
| letter-spacing |
设置字符间距 |
1 |
| line-height |
设置行高 |
1 |
| text-align |
规定文本的水平对齐方式 |
1 |
| text-decoration |
规定添加到文本的装饰效果 |
1 |
| text-indent |
规定文本块首行的缩进 |
1 |
| text-transform |
控制文本的大小写 |
1 |
| unicode-bidi |
|
2 |
| vertical-align |
设置元素的垂直对齐方式 |
1 |
| white-space |
设置怎样给一元素控件留白 |
1 |
| word-spacing |
设置单词间距 |
1 |
| 背景属性 |
描述 |
CSS |
| background |
复合属性，设置对象的背景特性 |
1 |
| background-attachment |
设置或检索背景图像是随对象内容滚动还是固定的，必须先指定background-image属性 |
1 |
| background-color |
设置或检索对象的背景颜色 |
1 |
| background-image |
设置或检索对象的背景图像 |
1 |
| background-position |
设置或检索对象的背景图像位置，必须先指定background-image属性 |
1 |
| background-repeat |
设置或检索对象的背景图像如何铺排填充，必须先指定background-image属性 |
1 |
| 边框属性 |
描述 |
CSS |
| border |
复合属性，设置对象边框的特性 |
1 |
| border-bottom |
复合属性，设置对象底部边框的特性 |
1 |
| border-bottom-color |
设置或检索对象的底部边框颜色 |
1 |
| border-bottom-style |
设置或检索对象的底部边框样式 |
1 |
| border-bottom-width |
设置或检索对象的底部边框宽度 |
1 |
| border-color |
置或检索对象的边框颜色 |
1 |
| border-left |
复合属性，设置对象左边边框的特性 |
1 |
| border-left-color |
设置或检索对象的左边边框颜色 |
1 |
| border-left-style |
设置或检索对象的左边边框样式 |
1 |
| border-left-width |
设置或检索对象的左边边框宽度 |
1 |
| border-right |
复合属性，设置对象右边边框的特性 |
1 |
| border-right-color |
设置或检索对象的右边边框颜色 |
1 |
| border-right-style |
设置或检索对象的右边边框样式 |
1 |
| border-right-width |
设置或检索对象的右边边框宽度 |
1 |
| border-style |
设置或检索对象的边框样式 |
1 |
| border-top |
复合属性，设置对象顶部边框的特性 |
1 |
| border-top-color |
设置或检索对象的顶部边框颜色 |
1 |
| border-top-style |
设置或检索对象的顶部边框样式 |
1 |
| border-top-width |
设置或检索对象的顶部边框宽度 |
1 |
| border-width |
设置或检索对象的边框宽度 |
1 |
| 轮廓属性 |
描述 |
CSS |
| outline |
复合属性，设置或检索对象外的线条轮廓 |
2 |
| outline-color |
设置或检索对象外的线条轮廓的颜色 |
2 |
| outline-style |
设置或检索对象外的线条轮廓的样式 |
2 |
| outline-width |
设置或检索对象外的线条轮廓的宽度 |
2 |
| 内边距属性 |
说明 |
CSS |
| padding |
在一个声明中设置所有填充属性 |
1 |
| padding-bottom |
设置元素的底填充 |
1 |
| padding-left |
设置元素的左填充 |
1 |
| padding-right |
设置元素的右填充 |
1 |
| padding-top |
设置元素的顶部填充 |
1 |
| 外边距属性 |
说明 |
CSS |
| margin |
在一个声明中设置所有外边距属性 |
1 |
| margin-bottom |
设置元素的下外边距 |
1 |
| margin-left |
设置元素的左外边距 |
1 |
| margin-right |
设置元素的右外边距 |
1 |
| margin-top |
设置元素的上外边距 |
1 |
| 列表属性 |
说明 |
CSS |
| list-style |
在一个声明中设置所有的列表属性 |
1 |
| list-style-image |
将图象设置为列表项标记 |
1 |
| list-style-position |
设置列表项标记的放置位置 |
1 |
| list-style-type |
设置列表项标记的类型 |
1 |
| 表格属性 |
说明 |
CSS |
| border-collapse |
规定是否合并表格边框 |
2 |
| border-spacing |
规定相邻单元格边框之间的距离 |
2 |
| caption-side |
规定表格标题的位置 |
2 |
| empty-cells |
规定是否显示表格中的空单元格上的边框和背景 |
2 |
| table-layout |
设置用于表格的布局算法 |
2 |
| 定位属性 |
说明 |
CSS |
| bottom |
设置定位元素下外边距边界与其包含块下边界之间的偏移 |
2 |
| clear |
规定元素的哪一侧不允许其他浮动元素 |
1 |
| clip |
剪裁绝对定位元素 |
2 |
| cursor |
规定要显示的光标的类型（形状） |
2 |
| display |
规定元素应该生成的框的类型 |
1 |
| float |
规定框是否应该浮动 |
1 |
| left |
设置定位元素左外边距边界与其包含块左边界之间的偏移 |
2 |
| overflow |
规定当内容溢出元素框时发生的事情 |
2 |
| position |
规定元素的定位类型 |
2 |
| right |
设置定位元素右外边距边界与其包含块右边界之间的偏移 |
2 |
| top |
设置定位元素的上外边距边界与其包含块上边界之间的偏移 |
2 |
| visibility |
规定元素是否可见 |
2 |
| z-index |
设置元素的堆叠顺序 |
2 |
| 内容生成属性 |
说明 |
CSS |
| content |
与 :before 以及 :after 伪元素配合使用，来插入生成内容 |
2 |
| counter-increment |
递增或递减一个或多个计数器 |
2 |
| counter-reset |
创建或重置一个或多个计数器 |
2 |
| quotes |
设置嵌套引用的引号类型 |
2 |
| 分页属性 |
说明 |
CSS |
| orphans |
设置当元素内部发生分页时必须在页面底部保留的最少行数 |
2 |
| page-break-after |
设置元素后的分页行为 |
2 |
| page-break-before |
设置元素前的分页行为 |
2 |
| page-break-inside |
设置元素内部的分页行为 |
2 |
| widows |
设置当元素内部发生分页时必须在页面顶部保留的最少行数 |
2 |
CSS 3 属性
CSS 3 块元素
语法：display: …
| 值 |
描述 |
| none |
此元素不会被显示 |
| block |
此元素将显示为块级元素，此元素前后会带有换行符 |
| inline |
默认，此元素会被显示为内联元素，元素前后没有换行符 |
| inline-block |
行内块元素 |
| list-item |
此元素会作为列表显示 |
| run-in |
此元素会根据上下文作为块级元素或内联元素显示 |
| table |
此元素会作为块级表格来显示，表格前后带有换行符 |
| inline-table |
此元素会作为内联表格来显示，表格前后没有换行符 |
| table-row-group |
此元素会作为一个或多个行的分组来显示 |
| table-header-group |
此元素会作为一个或多个行的分组来显示 |
| table-footer-group |
此元素会作为一个或多个行的分组来显示 |
| table-row |
此元素会作为一个表格行显示 |
| table-column-group |
此元素会作为一个或多个列的分组来显示 |
| table-column |
此元素会作为一个单元格列显示 |
| table-cell |
此元素会作为一个表格单元格显示 |
| table-caption |
此元素会作为一个表格标题显示 |
| inherit |
规定应该从父元素继承 display 属性的值 |
CSS 3 单位
- 相对长度单位指定了一个长度相对于另一个长度的属性，对于不同的设备相对长度更适用
- 绝对长度单位是一个固定的值，它反应一个真实的物理尺寸，绝对长度单位视输出介质而定，不依赖于环境（显示器、分辨率、操作系统等）
| 相对单位 |
描述 |
| em |
它是描述相对于应用在当前元素的字体尺寸，所以它也是相对长度单位。一般浏览器字体大小默认为16px，则2em == 32px； |
| ex |
依赖于英文字母小 x 的高度 |
| ch |
数字 0 的宽度 |
| rem |
rem 是根 em（root em）的缩写，rem作用于非根元素时，相对于根元素字体大小；rem作用于根元素字体大小时，相对于其出初始字体大小。 |
| vw |
viewpoint width，视窗宽度，1vw=视窗宽度的1% |
| vh |
viewpoint height，视窗高度，1vh=视窗高度的1% |
| vmin |
vw和vh中较小的那个。 |
| vmax |
vw和vh中较大的那个。 |
| % |
|
| 绝对单位 |
描述 |
| cm |
厘米 |
| mm |
毫米 |
| in |
英寸 (1in = 96px = 2.54cm) |
| px * |
像素 (1px = 1/96th of 1in) |
| pt |
point，大约1/72英寸； (1pt = 1/72in) |
| pc |
pica，大约6pt，1/6英寸； (1pc = 12 pt) |
CSS 3 颜色
颜色是由红（RED），绿（GREEN），蓝（BLUE ）光线的显示结合，CSS 3 中颜色的获取有以下几种：
- 颜色名称：red、yellow、green、blue、black、white、orange 等，其中透明为 transparent
- 十六进制：#ff0000、#ffff00、#00ff00、#0000ff 等，另外同组的可简写，例：#ff0000 = #f00，#ffffff = #fff，#000000 = #000
- RGB 格式：rgb(255,0,0)、rgb(255,255,0)、rgb(0,255,0)、rgb(0,0,255) 等
- RGBA 式：rgba(255,0,0,1)、rgba(255,255,0,1)、rgba(0,255,0,1)、rgba(0,0,255,1) 等，其中 a 表示透明度，1 = 100%，0.2 = 20%
| 属性 |
描述 |
CSS |
| opacity |
设置一个元素的透明度级别 |
3 |
div.main {
width: 200px;
height: 50px;
background-color: #f00;
opacity: 0.5;
}
| 比较 |
RGBA |
opacity |
| 取值相同 |
0.5 = 50% 透明度 |
0.5 = 50% 透明度 |
| 作用不同 |
仅仅作用颜色透明度设置 |
将整个元素透明度设置 |
| 影响子元素 |
不影响 |
影响 |
CSS 3 列表
| 属性 |
说明 |
CSS |
| list-style |
在一个声明中设置所有的列表属性 |
1 |
语法：list-style: type position image
| 值 |
描述 |
| list-style-type |
设置列表项标记的类型 |
| list-style-position |
设置在何处放置列表项标记 |
| list-style-image |
使用图像来替换列表项的标记 |
ul.main {
list-style: square inherit none;
}
语法：list-style-type: […]
| 值 |
描述 |
| none |
无标记 |
| disc |
默认，标记是实心圆 |
| circle |
标记是空心圆 |
| square |
标记是实心方块 |
| decimal |
标记是数字 |
| decimal-leading-zero |
0 开头的数字标记（01, 02, 03, 等） |
| lower-roman |
小写罗马数字（i, ii, iii, iv, v, 等） |
| upper-roman |
大写罗马数字（I, II, III, IV, V, 等） |
| lower-alpha |
小写英文字母The marker is lower-alpha（a, b, c, d, e, 等） |
| upper-alpha |
大写英文字母The marker is upper-alpha（A, B, C, D, E, 等） |
| lower-greek |
小写希腊字母（alpha, beta, gamma, 等） |
| lower-latin |
小写拉丁字母（a, b, c, d, e, 等） |
| upper-latin |
大写拉丁字母（A, B, C, D, E, 等） |
| hebrew |
传统的希伯来编号方式 |
| armenian |
传统的亚美尼亚编号方式 |
| georgian |
传统的乔治亚编号方式（an, ban, gan, 等） |
| cjk-ideographic |
简单的表意数字 |
| hiragana |
标记是：a, i, u, e, o, ka, ki, 等（日文片假名） |
| katakana |
标记是：A, I, U, E, O, KA, KI, 等（日文片假名） |
| hiragana-iroha |
标记是：i, ro, ha, ni, ho, he, to, 等（日文片假名） |
| katakana-iroha |
标记是：I, RO, HA, NI, HO, HE, TO, 等（日文片假名） |
ul.main {
list-style-type: none;
}
ul.main {
list-style-type: disc;
}
ul.main {
list-style-type: circle;
}
ul.main {
list-style-type: square;
}
ul.main {
list-style-type: decimal;
}
......
语法：list-style-position: inside | outside
| 值 |
描述 |
| inside |
列表项目标记放置在文本以内，且环绕文本根据标记对齐 |
| outside |
默认值，保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐 |
| inherit |
规定应该从父元素继承 list-style-position 属性的值 |
ul.main {
list-style-type: disc;
list-style-position: inherit;
}
ul.main {
list-style-type: disc;
list-style-position: inside;
}
ul.main {
list-style-type: disc;
list-style-position: outside;
}
CSS 3 表格
| 属性 |
说明 |
CSS |
| border-collapse |
规定是否合并表格边框 |
2 |
| border-spacing |
规定相邻单元格边框之间的距离 |
2 |
| caption-side |
规定表格标题的位置 |
2 |
| empty-cells |
规定是否显示表格中的空单元格上的边框和背景 |
2 |
| table-layout |
设置用于表格的布局算法 |
2 |
语法：border-collapse: collapse | separate | inherit
| 值 |
说明 |
| collapse |
如果可能，边框会合并为一个单一的边框，会忽略 border-spacing 和 empty-cells 属性 |
| separate |
默认值，边框会被分开，不会忽略 border-spacing 和 empty-cells 属性 |
| inherit |
规定应该从父元素继承 border-collapse 属性的值 |
table.main {
border-collapse: inherit;
}
| Firstname |
Lastname |
| Peter |
Griffin |
| Lois |
Griffin |
table.main {
border-collapse: collapse;
}
table.main {
border-collapse: separate;
}
table.main {
border-collapse: separate;
border-spacing: 10px 50px;
}
| Firstname |
Lastname |
| Peter |
Griffin |
| Lois |
Griffin |
语法：caption-side: bottom | top
| 值 |
描述 |
| top |
默认值，把表格标题定位在表格之上 |
| bottom |
把表格标题定位在表格之下 |
caption.main {
caption-side: bottom;
}
Table 1.1 Customers
| Firstname |
Lastname |
| Peter |
Griffin |
| Lois |
Griffin |
caption.main {
caption-side: top;
}
语法：empty-cells: show | hide
| 值 |
描述 |
| hide |
不在空单元格周围绘制边框 |
| show |
在空单元格周围绘制边框，默认 |
table.main {
border-collapse: separate;
empty-cells: hide;
}
table.main {
border-collapse: separate;
empty-cells: show;
}
语法：table-layout: auto | fixed
| 值 |
描述 |
| auto |
默认，列宽度由单元格内容设定 |
| fixed |
列宽由表格宽度和列宽度设定 |
table.main {
border-collapse: separate;
table-layout: fixed;
}
table.main {
border-collapse: separate;
table-layout: auto;
}
CSS 3 内容生成
| 属性 |
说明 |
CSS |
| content |
与 :before 以及 :after 伪元素配合使用，来插入生成内容 |
2 |
| counter-increment |
递增或递减一个或多个计数器 |
2 |
| counter-reset |
创建或重置一个或多个计数器 |
2 |
| quotes |
设置嵌套引用的引号类型 |
2 |
语法：content: […]
| 值 |
说明 |
| none |
设置Content，如果指定成Nothing |
| normal |
设置content，如果指定的话，正常，默认是"none"（该是nothing） |
| counter |
设定计数器内容 |
| attr*(attribute)* |
设置Content作为选择器的属性之一 |
| string |
设置Content到你指定的文本 |
| open-quote |
设置Content是开口引号 |
| close-quote |
设置Content是闭合引号 |
| no-open-quote |
如果指定，移除内容的开始引号 |
| no-close-quote |
如果指定，移除内容的闭合引号 |
| url(url) |
设置某种媒体（图像，声音，视频等内容） |
| inherit |
指定的content属性的值，应该从父元素继承 |
div.main:after {
content: 'world'
}
hello
a.main:before {
content: '(' attr(href) ')';
}
百度一下
q.main:lang(en) {
quotes: "~" "~" "'" "'";
}
q>This is a big
quote.
CSS 3 圆角
| 属性 |
描述 |
CSS |
| border-radius |
设置或检索对象使用圆角边框 |
3 |
语法：border-radius: 1-4 length|%; 1-4 表示可取1-4个值
顺序：左上角、右上角、右下角、左下角（顺时针方向）
- 一个值：四个圆角值详情哦那个
- 两个值：第一个值为左上角与右下角，第二个值为右上角与左下角
- 三个值：第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角
- 四个值：第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角
border-radius: 20px; -- 表示左上角、右上角、右下角、左下角圆角都为 20px
border-radius: 10px 20px; -- 表示左上角、右下角圆角为 10px，右上角、左下角圆角为 20px
border-radius: 10px 20px 5px; -- 表示左上角圆角为 10px，右上角、左下角圆角都为 20px，右下角圆角为 5px
border-radius: 10px 20px 5px 10px; -- 表示左上角圆角为 10px，右上角圆角为 20px，右下角圆角为 5px，左下角圆角为 10px
border-radius: 20%; -- 表示左上角、右上角、右下角、左下角圆角都为 20%
border-radius: 10% 20%; -- 表示左上角、右下角圆角为 10%，右上角、左下角圆角为 20%
border-radius: 10% 20% 5%; -- 表示左上角圆角为 10%，右上角、左下角圆角都为 20%，右下角圆角为 5%
border-radius: 10% 20% 5% 10%; -- 表示左上角圆角为 10%，右上角圆角为 20%，右下角圆角为 5%，左下角圆角为 10%
| 属性 |
描述 |
| border-top-left-radius |
定义了左上角的弧度 |
| border-top-right-radius |
定义了右上角的弧度 |
| border-bottom-right-radius |
定义了右下角的弧度 |
| border-bottom-left-radius |
定义了左下角的弧度 |
CSS 3 边界图片
| 属性 |
描述 |
CSS |
| border-image |
设置或检索对象的边框样式使用图像来填充 |
3 |
语法：border-image: source slice width outset repeat;
| 值 |
描述 |
| border-image-source |
用于指定要用于绘制边框的图像的位置 |
| border-image-slice |
图像边界向内偏移 |
| border-image-width |
图像边界的宽度 |
| border-image-outset |
用于指定在边框外部绘制 border-image-area 的量 |
| border-image-repeat |
这个例子演示了如何创建一个border-image 属性的按钮 |
div.main {
background-color:lightgrey;
border:30px solid transparent;
border-image: url('https://www.runoob.com/images/border.png');
border-image-slice: 30 30 30 30;
border-image-width: 1 1 1 1;
border-image-outset: 0;
border-image-repeat:stretch;
}
div.main {
background-color:lightgrey;
border:30px solid transparent;
border-image: url('https://www.runoob.com/images/border.png');
border-image-slice: 30 30 30 30;
border-image-width: 1 1 1 1;
border-image-outset: 0;
border-image-repeat:repeat;
}
div.main {
background-color:lightgrey;
border:30px solid transparent;
border-image: url('https://www.runoob.com/images/border.png');
border-image-slice: 30 30 30 30;
border-image-width: 1 1 1 1;
border-image-outset: 0;
border-image-repeat:round;
}
div.main {
background-color:lightgrey;
border:30px solid transparent;
border-image: url('https://www.runoob.com/images/border.png');
border-image-slice: 30 30 30 30;
border-image-width: 1 1 1 1;
border-image-outset: 0;
border-image-repeat:initial;
}
CSS 3 阴影
| 属性 |
描述 |
CSS |
| box-shadow |
向方框添加一个或多个阴影 |
3 |
| box-decoration-break |
规定行内元素被折行 |
3 |
语法：box-shadow: h-shadow v-shadow blur spread color inset;
| 值 |
说明 |
| h-shadow |
必需的，水平阴影的位置，允许负值 |
| v-shadow |
必需的，垂直阴影的位置，允许负值 |
| blur |
可选，模糊距离 |
| spread |
可选，阴影的大小 |
| color |
可选，阴影的颜色 |
| inset |
可选，从外层的阴影（开始时）改变阴影内侧阴影 |
div.main {
width:300px;
height:100px;
background-color:yellow;
box-shadow:10px 10px 5px #888;
}
CSS 3 背景
| 属性 |
描述 |
CSS |
| background-clip |
指定对象的背景图像向外裁剪的区域 |
3 |
| background-origin |
S设置或检索对象的背景图像计算 background-position 时的参考原点(位置) |
3 |
| background-size |
检索或设置对象的背景图像的尺寸大小 |
3 |
- background-size 指定背景图像的大小
- background-origin 属性指定了背景图像的位置区域
- background-clip 背景剪裁属性是从指定位置开始绘制
- background-image 可设置多张图片，哪个在前哪个就在上层
- background-position 可对应多个背景图设置位置
- background-repeat 可对应多个背景图设置填充方式
div.main {
width: 784px;
height: 230px;
background-image: url('https://www.w3cschool.cn/statics/images/course/img_flwr.gif'), url('https://www.w3cschool.cn/statics/images/course/paper.gif');
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
}
div.main {
width: 784px;
height: 230px;
background-image: url('https://www.w3cschool.cn/statics/images/course/img_flwr.gif');
background-repeat: no-repeat;
background-size: 80px 60px;
}
div.main {
width: 724px;
height: 170px;
padding: 30px;
background-image: url('https://www.w3cschool.cn/statics/images/course/img_flwr.gif');
background-repeat: no-repeat;
background-position: left;
background-origin: padding-box;
}
div.main {
width: 724px;
height: 170px;
padding: 30px;
background-image: url('https://www.w3cschool.cn/statics/images/course/img_flwr.gif');
background-repeat: no-repeat;
background-position: left;
background-origin: border-box;
}
div.main {
width: 724px;
height: 170px;
padding: 30px;
background-image: url('https://www.w3cschool.cn/statics/images/course/img_flwr.gif');
background-repeat: no-repeat;
background-position: left;
background-origin: content-box;
}
div.main {
width: 724px;
height: 170px;
padding: 30px;
background-color: yellow;
border: 10px dotted back;
background-clip: border-box;
}
div.main {
width: 724px;
height: 170px;
padding: 30px;
background-color: yellow;
border: 10px dotted back;
background-clip: padding-box;
}
div.main {
width: 724px;
height: 170px;
padding: 30px;
background-color: yellow;
border: 10px dotted back;
background-clip: content-box;
}
语法：backgrounc-size: length | percentage | cover | contain;
| 值 |
描述 |
| length |
设置背景图片高度和宽度。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为"auto(自动)" |
| percentage |
将计算相对于背景定位区域的百分比。第一个值设置宽度，第二个值设置的高度。如果只给出一个值，第二个是设置为"auto(自动)" |
| cover |
此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小 |
| contain |
此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小 |
语法：background-origin: padding-box | border-box | content-box
| 值 |
描述 |
| padding-box |
背景图像填充框的相对位置 |
| border-box |
背景图像边界框的相对位置 |
| content-box |
背景图像的相对位置的内容框 |
语法：background-clip: border-box | padding-box | content-box;
| 值 |
说明 |
| border-box |
默认值。背景绘制在边框方框内（剪切成边框方框） |
| padding-box |
背景绘制在衬距方框内（剪切成衬距方框） |
| content-box |
背景绘制在内容方框内（剪切成内容方框） |
CSS 3 渐变
- 线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
- 径向渐变（Radial Gradients）- 由它们的中心定义
语法：background: linear-gradient(direction, color1, color2, …);
div.main {
width: 500px;
height: 200px;
background: linear-gradient(red, blue); -- 默认从上向下
}
div.main {
width: 500px;
height: 200px;
background: linear-gradient(to bottom, red, blue); -- 从上向下
}
div.main {
width: 500px;
height: 200px;
background: linear-gradient(to top, red, blue); -- 从下向上
}
div.main {
width: 500px;
height: 200px;
background: linear-gradient(to right, red, blue); -- 从左向右
}
div.main {
width: 500px;
height: 200px;
background: linear-gradient(to left, red, blue); -- 从右向左
}
div.main {
width: 500px;
height: 200px;
background: linear-gradient(to bottom right, red, blue); -- 从左上角向右下角
}
div.main {
width: 500px;
height: 200px;
background: linear-gradient(to bottom left, red, blue); -- 从右上角向左下角
}
div.main {
width: 500px;
height: 200px;
background: linear-gradient(to top right, red, blue); -- 从左下角向右上角
}
div.main {
width: 500px;
height: 200px;
background: linear-gradient(to top left, red, blue); -- 从右下角向左上角
}
语法：background: linear-gradient(angle, color1, color2, …);
div.main {
width: 500px;
height: 200px;
background: linear-gradient(0deg, red, blue);
}
div.main {
width: 500px;
height: 200px;
background: linear-gradient(90deg, red, blue);
}
div.main {
width: 500px;
height: 200px;
background: linear-gradient(180deg, red, blue);
}
div.main {
width: 500px;
height: 200px;
background: linear-gradient(-90deg, red, blue);
}
语法：background: linear-gradient(proportion, color1, color2, …);
div.main {
width: 500px;
height: 200px;
background: linear-gradient(red, yellow, blue, green, pink);
}
div.main {
width: 500px;
height: 200px;
background: linear-gradient(red 10%, yellow 20%, blue 30%, green 15%, pink 25%);
}
语法：background：radial-gradient(center, shape, color1, color2, …);
div.main {
width: 500px;
height: 200px;
background: linear-gradient(ellipse, red, yellow, green);
}
div.main {
width: 500px;
height: 200px;
background: linear-gradient(circle, red, yellow, green);
}
div.main {
width: 500px;
height: 200px;
background: linear-gradient(circle, red, yellow, green);
}
CSS 3 字体
| 属性 |
说明 |
CSS |
| @font-face |
一个规则，允许网站下载并使用其他超过"Web- safe"字体的字体 |
3 |
| font-size-adjust |
为元素规定 aspect 值（仅火狐浏览器支持） |
3 |
| font-stretch |
收缩或拉伸当前的字体系列（暂无浏览器支持） |
3 |
@font-face {
font-family: myFont;
src: url('https://www.runoob.com/try/demo_source/Sansation_Light.ttf'), url('https://www.runoob.com/try/demo_source/Sansation_Light.eot');
}
div.main {
font-family: myFont;
}
使用 CSS3 定义的字体内容
CSS 3 文本
| 属性 |
说明 |
CSS |
| hanging-punctuation |
指定一个标点符号是否可能超出行框（暂无浏览器支持） |
3 |
| punctuation-trim |
指定一个标点符号是否要去掉（暂无浏览器支持） |
3 |
| text-align-last |
当 text-align 设置为 justify 时，最后一行的对齐方式（暂无浏览器支持） |
3 |
| text-justify |
当 text-align 设置为 justify 时指定分散对齐的方式 |
3 |
| text-outline |
设置文字的轮廓（暂无浏览器支持） |
3 |
| text-overflow |
指定当文本溢出包含的元素，应该发生什么 |
3 |
| text-shadow |
为文本添加阴影 |
3 |
| text-wrap |
指定文本换行规则（暂无浏览器支持） |
3 |
| word-break |
指定非CJK文字的断行规则 |
3 |
| word-wrap |
设置浏览器是否对过长的单词进行换行 |
3 |
语法：text-justify: auto | inter-word | inter-ideograph | inter-cluster | distribute | kashida | none
| 值 |
描述 |
| auto |
浏览器决定齐行算法 |
| none |
禁用齐行 |
| inter-word |
增加/减少单词间的间隔 |
| inter-ideograph |
用表意文本来排齐内容 |
| inter-cluster |
只对不包含内部单词间隔的内容（比如亚洲语系）进行排齐 |
| distribute |
类似报纸版面，除了在东亚语系中最后一行是不齐行的 |
| kashida |
通过拉伸字符来排齐内容 |
div.main {
width: 500px;
text-align: justify;
text-justify: auto;
}
In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'
div.main {
width: 500px;
text-align: justify;
text-justify: none;
}
div.main {
width: 500px;
text-align: justify;
text-justify: inter-word;
}
div.main {
width: 500px;
text-align: justify;
text-justify: inter-ideograph;
}
div.main {
width: 500px;
text-align: justify;
text-justify: inter-cluster;
}
div.main {
width: 500px;
text-align: justify;
text-justify: distribute;
}
div.main {
width: 500px;
text-align: justify;
text-justify: kashida;
}
语法：text-overflow: clip | ellipsis | string;
| 值 |
描述 |
| clip |
修剪文本 |
| ellipsis |
显示省略符号来代表被修剪的文本 |
| string |
使用给定的字符串来代表被修剪的文本 |
div.main {
width: 500px;
text-overflow: ellipsis;
}
In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'
div.main {
width: 500px;
text-overflow: clip;
}
div.main {
width: 500px;
text-overflow: string;
}
语法：text-shadow: h-shadow v-shadow blur color;
| 值 |
描述 |
| h-shadow |
必需，水平阴影的位置，允许负值 |
| v-shadow |
必需，垂直阴影的位置，允许负值 |
| blur |
可选，模糊的距离 |
| color |
可选，阴影的颜色 |
div.main {
width: 500px;
text-shadow: 2px 2px #f00;
}
Text-shadow effect
语法：word-break: normal | break-all | keep-all;
| 值 |
描述 |
| normal |
使用浏览器默认的换行规则 |
| break-all |
允许在单词内换行 |
| keep-all |
只能在半角空格或连字符处换行 |
div.main {
width: 9em;
border: 1px solid #000;
word-break: normal;
}
This paragraph contains some text. This line will-break-at-hyphenates.
div.main {
width: 9em;
border: 1px solid #000;
word-break: break-all;
}
div.main {
width: 9em;
border: 1px solid #000;
word-break: keep-all;
}
语法：word-wrap: normal | break-word;
| 值 |
描述 |
| normal |
只在允许的断字点换行（浏览器保持默认处理） |
| break-word |
在长单词或 URL 地址内部进行换行 |
div.main {
width: 11em;
border: 1px solid #000;
word-wrap: normal;
}
This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.
div.main {
width: 11em;
border: 1px solid #000;
word-wrap: break-word;
}
CSS 3 盒子
| 属性 |
描述 |
CSS |
| overflow-x |
如果内容溢出了元素内容区域，是否对内容的左/右边缘进行裁剪 |
3 |
| overflow-y |
如果内容溢出了元素内容区域，是否对内容的上/下边缘进行裁剪 |
3 |
| overflow-style |
规定溢出元素的首选滚动方法（暂无浏览器支持） |
3 |
| rotation |
围绕由 rotation-point 属性定义的点对元素进行旋转（暂无浏览器支持） |
3 |
| rotation-point |
定义距离上左边框边缘的偏移点（暂无浏览器支持） |
3 |
语法：overflow-x: visible | hidden | scroll | auto | no-display | no-content;
| 值 |
描述 |
| visible |
不裁剪内容，可能会显示在内容框之外 |
| hidden |
裁剪内容 - 不提供滚动机制 |
| scroll |
裁剪内容 - 提供滚动机制 |
| auto |
如果溢出框，则应该提供滚动机制 |
| no-display |
如果内容不适合内容框，则删除整个框 |
| no-content |
如果内容不适合内容框，则隐藏整个内容 |
div.main {
width: 110px;
height: 110px;
border: 1px solid #000;
overflow-x: visible;
}
In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.
'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'
div.main {
width: 110px;
height: 110px;
border: 1px solid #000;
overflow-x: hidden;
}
div.main {
width: 110px;
height: 110px;
border: 1px solid #000;
overflow-x: scroll;
}
div.main {
width: 110px;
height: 110px;
border: 1px solid #000;
overflow-x: auto;
}
div.main {
width: 110px;
height: 110px;
border: 1px solid #000;
overflow-x: no-display;
}
div.main {
width: 110px;
height: 110px;
border: 1px solid #000;
overflow-x: no-content;
}
语法：overflow-y: visible | hidden | scroll | auto | no-display | no-content;
| 值 |
描述 |
| visible |
不裁剪内容，可能会显示在内容框之外 |
| hidden |
裁剪内容 - 不提供滚动机制 |
| scroll |
裁剪内容 - 提供滚动机制 |
| auto |
如果溢出框，则应该提供滚动机制 |
| no-display |
如果内容不适合内容框，则删除整个框 |
| no-content |
如果内容不适合内容框，则隐藏整个内容 |
div.main {
width: 110px;
height: 110px;
border: 1px solid #000;
overflow-y: visible;
}
In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.
'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'
div.main {
width: 110px;
height: 110px;
border: 1px solid #000;
overflow-y: hidden;
}
div.main {
width: 110px;
height: 110px;
border: 1px solid #000;
overflow-y: scroll;
}
div.main {
width: 110px;
height: 110px;
border: 1px solid #000;
overflow-y: auto;
}
div.main {
width: 110px;
height: 110px;
border: 1px solid #000;
overflow-y: no-display;
}
div.main {
width: 110px;
height: 110px;
border: 1px solid #000;
overflow-y: no-content;
}
CSS 3 2D/3D
| 属性 |
说明 |
CSS |
| transform |
适用于2D或3D转换的元素 |
3 |
| transform-origin |
允许您更改转化元素位置 |
3 |
| transform-style |
3D空间中的指定如何嵌套元素 |
3 |
| perspective |
指定3D元素是如何查看透视图 |
3 |
| perspective-origin |
指定3D元素底部位置 |
3 |
| backface-visibility |
定义一个元素是否应该是可见的，不对着屏幕时 |
3 |
语法：transform: none | transform-functions;
| 值 |
描述 |
| none |
定义不进行转换。 |
| matrix(n,n,n,n,n,n) |
定义 2D 转换，使用六个值的矩阵。 |
| matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) |
定义 3D 转换，使用 16 个值的 4x4 矩阵。 |
| translate(x,y) |
定义 2D 转换。 |
| translate3d(x,y,z) |
定义 3D 转换。 |
| translateX(x) |
定义转换，只是用 X 轴的值。 |
| translateY(y) |
定义转换，只是用 Y 轴的值。 |
| translateZ(z) |
定义 3D 转换，只是用 Z 轴的值。 |
| scale(x[,y]?) |
定义 2D 缩放转换。 |
| scale3d(x,y,z) |
定义 3D 缩放转换。 |
| scaleX(x) |
通过设置 X 轴的值来定义缩放转换。 |
| scaleY(y) |
通过设置 Y 轴的值来定义缩放转换。 |
| scaleZ(z) |
通过设置 Z 轴的值来定义 3D 缩放转换。 |
| rotate(angle) |
定义 2D 旋转，在参数中规定角度。 |
| rotate3d(x,y,z,angle) |
定义 3D 旋转。 |
| rotateX(angle) |
定义沿着 X 轴的 3D 旋转。 |
| rotateY(angle) |
定义沿着 Y 轴的 3D 旋转。 |
| rotateZ(angle) |
定义沿着 Z 轴的 3D 旋转。 |
| skew(x-angle,y-angle) |
定义沿着 X 和 Y 轴的 2D 倾斜转换。 |
| skewX(angle) |
定义沿着 X 轴的 2D 倾斜转换。 |
| skewY(angle) |
定义沿着 Y 轴的 2D 倾斜转换。 |
| perspective(n) |
为 3D 转换元素定义透视视图。 |
div.main {
width: 80px;
height: 80px;
background-color: #03f;
transform: translate(45px, 1em);
}
div.main {
width: 80px;
height: 80px;
background-color: #03f;
transform: translate3d(45px, 1em, 1em);
}
div.main {
width: 80px;
height: 80px;
background-color: #03f;
transform: translateX(45px);
}
div.main {
width: 80px;
height: 80px;
background-color: #03f;
transform: translateY(45px);
}
div.main {
width: 80px;
height: 80px;
background-color: #03f;
transform: translateZ(45px);
}
div.main {
width: 80px;
height: 80px;
background-color: #03f;
transform: scale(2, 2);
}
div.main {
width: 80px;
height: 80px;
background-color: #03f;
transform: scale3d(2, 2);
}
div.main {
width: 80px;
height: 80px;
background-color: #03f;
transform: scaleX(2);
}
div.main {
width: 80px;
height: 80px;
background-color: #03f;
transform: scaleY(2);
}
div.main {
width: 80px;
height: 80px;
background-color: #03f;
transform: scaleZ(2);
}
div.main {
width: 80px;
height: 80px;
background-color: #03f;
transform: rotate(45deg);
}
div.main {
width: 80px;
height: 80px;
background-color: #03f;
transform: rotate3d(45deg);
}
div.main {
width: 80px;
height: 80px;
background-color: #03f;
transform: rotateX(45deg);
}
div.main {
width: 80px;
height: 80px;
background-color: #03f;
transform: rotateY(45deg);
}
div.main {
width: 80px;
height: 80px;
background-color: #03f;
transform: rotateZ(45deg);
}
div.main {
width: 80px;
height: 80px;
background-color: #03f;
transform: skew(45deg, 45deg);
}
div.main {
width: 80px;
height: 80px;
background-color: #03f;
transform: skewX(45deg);
}
div.main {
width: 80px;
height: 80px;
background-color: #03f;
transform: skewY(45deg);
}
div.main {
width: 80px;
height: 80px;
background-color: #03f;
transform: matrix(2, 2, 0, 2, 45, 0);
}
div.main {
width: 80px;
height: 80px;
background-color: #03f;
transform: matrix3d(2, 2, 0, 2, 45, 0);
}
div.main {
width: 80px;
height: 80px;
background-color: #03f;
transform: rotateX(45deg);
perspective: 100px;
}
语法：transform-origin: x-axis y-axis z-axis;
| 值 |
描述 |
| x-axis |
定义视图被置于 X 轴的何处，可能的值：left、center、right、length、% |
| y-axis |
定义视图被置于 Y 轴的何处，可能的值：top、center、bottom、length、% |
| z-axis |
定义视图被置于 Z 轴的何处，可能的值：length |
div.main {
width: 80px;
height: 80px;
background-color: #03f;
transform: rotateX(45deg);
transform-origin: 20% 40%;
}
语法：transform-style: falt | preserve-3d;
| 值 |
描述 |
| flat |
子元素将不保留其 3D 位置 |
| preserve-3d |
子元素将保留其 3D 位置 |
div.main {
width: 80px;
height: 80px;
background-color: #03f;
transform: rotateY(60deg);
transform-style: preserve-3d;
}
div.main {
width: 80px;
height: 80px;
background-color: #03f;
transform: rotateY(60deg);
transform-style: flat;
}
语法：perspective-origin: x-axis y-axis;
| 值 |
描述 |
| x-axis |
定义该视图在 x 轴上的位置。默认值：50%，可能的值：left、center、right、length、% |
| y-axis |
定义该视图在 y 轴上的位置。默认值：50%，可能的值：top、center、bottom、length、% |
div.main {
width: 80px;
height: 80px;
background-color: #03f;
transform: rotateX(45deg);
perspective: 100px;
perspective-origin: 10% 10%;
}
语法：backface-visibility: visible | hidden;
| 值 |
描述 |
| visible |
默认值，背面是可见的 |
| hidden |
背面是不可见的 |
div.main {
width: 80px;
height: 80px;
background-color: #03f;
backface-visibility: hidden;
}
div.main {
width: 80px;
height: 80px;
background-color: #03f;
backface-visibility: visible;
}
CSS 3 过渡
| 属性 |
说明 |
CSS |
| transition |
此属性是 transition-property、transition-duration、transition-timing-function、transition-delay 的简写形式。 |
3 |
语法：transition: property duration timing-function delay;
| 值 |
描述 |
| transition-property |
指定CSS属性的name，transition效果 |
| transition-duration |
transition效果需要指定多少秒或毫秒才能完成 |
| transition-timing-function |
指定transition效果的转速曲线 |
| transition-delay |
定义transition效果开始的时候 |
div.main {
width: 100px;
height: 80px;
background-color: #03f;
transition: width 2s;
}
div.main:hover {
width: 300px;
}
语法：transition-property: none | all | property;
| 值 |
描述 |
| none |
没有属性会获得过渡效果 |
| all |
所有属性都将获得过渡效果 |
| property |
定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔 |
语法：transition-timing-function: linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n);
| 值 |
描述 |
| linear |
规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)） |
| ease |
规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)） |
| ease-in |
规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)） |
| ease-out |
规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)） |
| ease-in-out |
规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)） |
| cubic-bezier(n,n,n,n) |
在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值 |
div.main {
width: 100px;
height: 80px;
background-color: #03f;
transition: width 2s linear;
}
div.main:hover {
width: 300px;
}
div.main {
width: 100px;
height: 80px;
background-color: #03f;
transition: width 2s ease;
}
div.main:hover {
width: 300px;
}
div.main {
width: 100px;
height: 80px;
background-color: #03f;
transition: width 2s ease-in;
}
div.main:hover {
width: 300px;
}
div.main {
width: 100px;
height: 80px;
background-color: #03f;
transition: width 2s ease-out;
}
div.main:hover {
width: 300px;
}
div.main {
width: 100px;
height: 80px;
background-color: #03f;
transition: width 2s ease-in-out;
}
div.main:hover {
width: 300px;
}
div.main {
width: 100px;
height: 80px;
background-color: #03f;
transition: width 2s cubic-bezier(0.17,0.86,0.73,0.14);
}
div.main:hover {
width: 300px;
}
| 动画 |
贝赛尔线 |
| linear |
cubic-bezier(0,0,1,1) | cubic-bezier(1,1,0,0) |
| ease |
cubic-bezier(0.25,0.1,0.25,1) |
| ease-in |
cubic-bezier(0.42,0,1,1) |
| ease-out |
cubic-bezier(0,0,0.58,1) |
| ease-in-out |
cubic-bezier(0.42, 0, 0.58, 1) |
CSS 3 动画
| 属性 |
描述 |
CSS |
| @keyframes |
定义一个动画,@keyframes定义的动画名称用来被animation-name所使用。 |
3 |
| animation |
复合属性。检索或设置对象所应用的动画特效。 |
3 |
语法：animation: name duration timing-function delay iteration-count direction fill-mode play-state;
| 值 |
说明 |
| animation-name |
指定要绑定到选择器的关键帧的名称 |
| animation-duration |
动画指定需要多少秒或毫秒完成 |
| animation-timing-function |
设置动画将如何完成一个周期 |
| animation-delay |
设置动画在启动前的延迟间隔 |
| animation-iteration-count |
定义动画的播放次数。 |
| animation-direction |
指定是否应该轮流反向播放动画 |
| animation-fill-mode |
规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式 |
| animation-play-state |
指定动画是否正在运行或已暂停 |
@keyframes myMove {
from { left: 0px; }
to { left: 200px; }
}
div.main {
position: relative;
width: 100px;
height: 100px;
background-color: #03f;
animation: myMove 5s ease 0 infinite normal none running;
}
@keyframes myMove {
0% { top:0px; }
25% { top:200px; }
75% { top:50px }
100% { top:100px; }
}
语法：animation-timing-function: linear | ease | ease-in | ease-out | cubic-bezier(n,n,n,n);
| 值 |
描述 |
| linear |
动画从开始到结束具有相同的速度 |
| ease |
动画有一个缓慢的开始，然后快，结束慢 |
| ease-in |
动画有一个缓慢的开始 |
| ease-out |
动画结束缓慢 |
| ease-in-out |
动画具有缓慢的开始和慢的结束 |
| cubic-bezier(n,n,n,n) |
在立方贝塞尔函数中定义速度函数，可能的值是从0到1的数字值 |
语法：animation-iteration-count: value;
| 值 |
描述 |
| n |
定义播放动画多少次， 默认值为1 |
| infinite |
指定动画应该播放无限次（永远） |
语法：animation-direction: normal | reverse | alternate | alternate-reverse | initial | inherit;
| 值 |
描述 |
| normal |
默认值，动画按正常播放 |
| reverse |
动画反向播放 |
| alternate |
动画在奇数次（1、3、5…）正向播放，在偶数次（2、4、6…）反向播放 |
| alternate-reverse |
动画在奇数次（1、3、5…）反向播放，在偶数次（2、4、6…）正向播放 |
语法：animation-fill-mode: none | forwards | backwards | both | initial | inherit;
| 值 |
描述 |
| none |
默认值，动画在动画执行之前和之后不会应用任何样式到目标元素 |
| forwards |
在动画结束后（由 animation-iteration-count 决定），动画将应用该属性值 |
| backwards |
动画将应用在 animation-delay 定义期间启动动画的第一次迭代的关键帧中定义的属性值。这些都是 from 关键帧中的值（当 animation-direction 为 “normal” 或 “alternate” 时）或 to 关键帧中的值（当 animation-direction 为 “reverse” 或 “alternate-reverse” 时） |
| both |
动画遵循 forwards 和 backwards 的规则。也就是说，动画会在两个方向上扩展动画属性 |
语法：animation-play-state: paused | running;
| 值 |
描述 |
| paused |
指定暂停动画 |
| running |
指定正在运行的动画 |
CSS 3 多列
| 属性 |
说明 |
CSS |
| column-fill |
指定如何填充列（仅火狐浏览器支持） |
3 |
| column-gap |
指定列之间的差距 |
3 |
| column-rule |
对于设置所有column-rule-*属性的简写属性 |
3 |
| column-span |
指定元素应该跨越多少列 |
3 |
| columns |
缩写属性设置列宽和列数 |
3 |
语法：columns: column-width column-count;
| 值 |
描述 |
| column-width |
列的宽度 |
| column-count |
列数 |
div.main {
columns:100px 3;
}
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.
语法：column-gap: length | normal;
| 值 |
描述 |
| ength |
一个指定的长度，将设置列之间的差距 |
| normal |
指定一个列之间的普通差距， W3C建议1EM值 |
div.main {
columns:100px 3;
column-gap:40px;
}
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.
语法：column-span: 1 | all;
| 值 |
描述 |
| 1 |
元素应跨越一列 |
| all |
该元素应该跨越所有列 |
div.main {
columns:100px 3;
column-gap:40px;
}
div.main h2 {
column-span: all;
}
英国维斯米斯特教堂碑文
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.
语法：column-rule: column-rule-width column-rule-style column-rule-color;
| 值 |
说明 |
| column-rule-width |
设置列中之间的宽度规则 |
| column-rule-style |
设置列中之间的样式规则 |
| column-rule-color |
设置列中之间的颜色规则 |
div.main {
columns:100px 3;
column-gap:40px;
column-rule:4px outset #ff00ff;
}
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.
语法：column-rule-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset;
| 值 |
描述 |
| none |
定义没有规则 |
| hidden |
定义隐藏规则 |
| dotted |
定义点状规则 |
| dashed |
定义虚线规则 |
| solid |
定义实线规则 |
| double |
定义双线规则 |
| groove |
定义 3D grooved 规则，该效果取决于宽度和颜色值 |
| ridge |
定义 3D ridged 规则，该效果取决于宽度和颜色值 |
| inset |
定义 3D inset 规则，该效果取决于宽度和颜色值 |
| outset |
定义 3D outset 规则，该效果取决于宽度和颜色值 |
CSS 3 弹性盒子
| 属性 |
说明 |
CSS |
| flex |
复合属性，设置或检索弹性盒模型对象的子元素如何分配空间 |
3 |
| flex-flow |
复合属性，设置或检索弹性盒模型对象的子元素排列方式 |
3 |
| align-content |
在弹性容器内的各项没有占用交叉轴上所有可用的空间时对齐容器内的各项（垂直） |
3 |
| align-items |
定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式 |
3 |
| align-self |
定义flex子项单独在侧轴（纵轴）方向上的对齐方式 |
3 |
| justify-content |
设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式 |
3 |
| order |
设置或检索弹性盒模型对象的子元素出现的順序 |
3 |
语法：flex: flex-grow flex-shrink flex-basis | auto | initial | inherit;
| 值 |
描述 |
| flex-grow |
一个数字，规定项目将相对于其他灵活的项目进行扩展的量 |
| flex-shrink |
一个数字，规定项目将相对于其他灵活的项目进行收缩的量 |
| flex-basis |
项目的长度，合法值：“auto”、“inherit” 或一个后跟 “%”、“px”、“em” 或任何其他长度单位的数字 |
| auto |
与 1 1 auto 相同 |
| none |
与 0 0 auto 相同 |
| initial |
设置该属性为它的默认值，即为 0 1 auto |
| inherit |
从父元素继承该属性 |
div.main {
width: 330px;
height: 200px;
display: flex;
}
div.item { flex: 1; }
div.item:nth-child(1) { background-color: coral; }
div.item:nth-child(2) { background-color: lightblue; }
div.item:nth-child(3) { background-color: lightgreen; }
语法：flex-flow: flex-direction flex-wrap | initial | inherit;
| 值 |
描述 |
| flex-direction |
可能的值： row row-reverse column column-reverse initial inherit默认值是 “row”，规定灵活项目的方向 |
| flex-wrap |
可能的值： nowrap wrap wrap-reverse initial inherit默认值是 “nowrap”，规定灵活项目是否拆行或拆列 |
| initial |
设置该属性为它的默认值 |
| inherit |
从父元素继承该属性 |
div.main {
width: 200px;
height: 200px;
display: flex;
flex-flow: row-reverse wrap
}
div.item {
width: 50px;
height: 50px;
}
div.item:nth-child(1) { background-color: coral; }
div.item:nth-child(2) { background-color: lightblue; }
div.item:nth-child(3) { background-color: khaki; }
div.item:nth-child(4) { background-color: pink; }
div.item:nth-child(5) { background-color: lightgrey; }
div.item:nth-child(6) { background-color: lightgreen; }
语法：align-content: stretch | center | flex-start | flex-end | space-between | space-around | initial | inherit;
| 值 |
描述 |
| stretch |
默认值，项目被拉伸以适应容器 |
| center |
项目位于容器的中心 |
| flex-start |
项目位于容器的开头 |
| flex-end |
项目位于容器的结尾 |
| space-between |
项目位于各行之间留有空白的容器内 |
| space-around |
项目位于各行之前、之间、之后都留有空白的容器内 |
| initial |
设置该属性为它的默认值 |
| inherit |
从父元素继承该属性 |
div.main {
width: 70px;
height: 300px;
display: flex;
flex-wrap: wrap;
align-content: center;
}
div.item {
width: 70px;
height: 70px;
}
div.item:nth-child(1) { background-color: coral; }
div.item:nth-child(2) { background-color: lightblue; }
div.item:nth-child(3) { background-color: pink; }
语法：align-items: stretch | center | flex-start | flex-end | baseline | initial | inherit;
| 值 |
描述 |
| stretch |
默认， 拉伸元件以适应容器 |
| center |
中心元素在容器内 |
| flex-start |
位置元素在容器的开头 |
| flex-end |
位置元素在容器的末端 |
| baseline |
位置元素在容器的基线 |
| initial |
设置为默认值 |
| inherit |
从其父元素继承此属性 |
div.main {
width: 220px;
height: 300px;
display: flex;
align-items: center;
}
div.item {
flex: 1;
}
div.item:nth-child(1) { background-color: coral; }
div.item:nth-child(2) { background-color: lightblue; }
div.item:nth-child(3) { background-color: pink; }
语法：align-self: auto | stretch | center | flex-start | flex-end | baseline | initial | inherit;
| 值 |
描述 |
| auto |
默认值。元素继承了它的父容器的 align-items 属性。如果没有父容器则为 “stretch” |
| stretch |
元素被拉伸以适应容器 |
| center |
元素位于容器的中心 |
| flex-start |
元素位于容器的开头 |
| flex-end |
元素位于容器的结尾 |
| baseline |
元素位于容器的基线上 |
| initial |
设置该属性为它的默认值 |
| inherit |
从父元素继承该属性 |
div.main {
width: 220px;
height: 300px;
display: flex;
align-items: flex-start;
}
div.item {
flex: 1;
}
div.item:nth-child(1) { background-color: coral; }
div.item:nth-child(2) { background-color: lightblue; }
div.item:nth-child(3) { background-color: pink; }
语法：justify-content: flex-start | flex-end | center | space-between | space-around | initial | inherit;
| 值 |
描述 |
| flex-start |
默认值，项目位于容器的开头 |
| flex-end |
项目位于容器的结尾 |
| center |
项目位于容器的中心 |
| space-between |
项目位于各行之间留有空白的容器内 |
| space-around |
项目位于各行之前、之间、之后都留有空白的容器内 |
| initial |
设置该属性为它的默认值 |
| inherit |
从父元素继承该属性 |
div.main {
width: 220px;
height: 300px;
display: flex;
justify-content: space-around;
}
div.item {
flex: 1;
}
div.item:nth-child(1) { background-color: coral; }
div.item:nth-child(2) { background-color: lightblue; }
div.item:nth-child(3) { background-color: pink; }
语法：order: number | initial | inherit;
| 值 |
描述 |
| number |
默认值是 0，规定灵活项目的顺序 |
| initial |
设置该属性为它的默认值 |
| inherit |
从父元素继承该属性 |
div.main {
width: 400px;
height: 150px;
display: flex;
}
div.item {
width: 70px;
height: 70px;
}
div.item:nth-child(1) { background-color: coral; order: 2; }
div.item:nth-child(2) { background-color: lightblue; order: 4; }
div.item:nth-child(3) { background-color: pink; order: 3; }
div.item:nth-child(4) { background-color: lightgreen; order:1; }
CSS 3 外观
| 属性 |
说明 |
CSS |
| appearance |
定义元素的外观样式 |
3 |
| box-sizing |
允许您为了适应区域以某种方式定义某些元素 |
3 |
| icon |
为元素指定图标（暂无浏览器支持） |
3 |
| nav-down |
指定用户按向下键时向下导航的位置（暂无浏览器支持） |
3 |
| nav-index |
指定导航（tab）顺序（暂无浏览器支持） |
3 |
| nav-left |
指定用户按向左键时向左导航的位置（暂无浏览器支持） |
3 |
| nav-right |
指定用户按向右键时向右导航的位置（暂无浏览器支持） |
3 |
| nav-up |
指定用户按向上键时向上导航的位置（暂无浏览器支持） |
3 |
| outline-offset |
设置轮廓框架在 border 边缘外的偏移（IE 浏览器不支持） |
3 |
| resize |
定义元素是否可以改变大小 |
3 |
语法：appearance: normal | icon | window | button | menu | field;
| 值 |
说明 |
| normal |
正常呈现元素 |
| icon |
作为一个小图片的呈现元素 |
| window |
作为一个视口呈现元素 |
| button |
作为一个按钮，呈现元素 |
| menu |
作为一个用户选项设定呈现元素选择 |
| field |
作为一个输入字段呈现元素 |
div.main {
appearance:button;
}
语法：box-sizing: content-box | border-box | inherit:
| 值 |
说明 |
| content-box |
这是CSS2.1指定的宽度和高度的行为，指定元素的宽度和高度（最小/最大属性）适用于box的宽度和高度，元素的填充和边框布局和绘制指定宽度和高度除外 |
| border-box |
指定宽度和高度（最小/最大属性）确定元素边框box，也就是说，对元素指定宽度和高度包括padding和border的指定，内容的宽度和高度减去各自双方该边框和填充的宽度从指定的"宽度"和"高度"属性计算 |
| inherit |
指定box-sizing属性的值，应该从父元素继承 |
div.main {
width: 300px;
height: 200px;
padding: 20px;
background-color: pink;
box-sizing: border-box;
}
语法：outline-offset: length | inherit:
div.main {
width: 150px;
height: 70px;
border: 1px solid #000;
outline: 1px solid #f00;
outline-offset: 15px;
}
语法：resize: none | both | horizontal | vertical;
| 值 |
描述 |
| none |
用户无法调整元素的尺寸 |
| both |
用户可调整元素的高度和宽度 |
| horizontal |
用户可调整元素的宽度 |
| vertical |
用户可调整元素的高度 |
div.main {
width: 300px;
height: 100px;
overflow: auto;
resize: both;
border: 1px solid #000;
}
CSS 3 兼容
属性兼容
| 属性 |
IE |
Firefox |
Chrome |
Safari |
Opera |
| @keyframes |
>= 10+ |
>= 16+ |
-webkit- |
-webkit- |
>= 12+ |
| animation |
>= 10+ |
>= 16+ |
-webkit- |
-webkit- |
>= 12+ |
| animation-name |
>= 10+ |
>= 16+ |
-webkit- |
-webkit- |
>= 12+ |
| animation-duration |
>= 10+ |
>= 16+ |
-webkit- |
-webkit- |
>= 12+ |
| animation-timing-function |
>= 10+ |
>= 16+ |
-webkit- |
-webkit- |
>= 12+ |
| animation-delay |
>= 10+ |
>= 16+ |
-webkit- |
-webkit- |
>= 12+ |
| animation-iteration-count |
>= 10+ |
>= 16+ |
-webkit- |
-webkit- |
>= 12+ |
| animation-direction |
>= 10+ |
>= 16+ |
-webkit- |
-webkit- |
>= 12+ |
| animation-play-state |
>= 10+ |
>= 16+ |
-webkit- |
-webkit- |
>= 12+ |
| appearance |
不支持 |
-moz- |
-webkit- |
-webkit- |
不支持 |
| backface-visibility |
-ms- |
-moz- |
-webkit- |
-webkit- |
-webkit- |
| background-clip |
>= 9+ |
>= 4+ |
>= 4+ |
>= 5+ |
>= 10+ |
| background-origin |
>= 9+ |
>= 4+ |
>= 4+ |
>= 5+ |
>= 10+ |
| background-size |
>= 9+ |
>= 4+ |
>= 4+ |
>= 5+ |
>= 10+ |
| border-bottom-left-radius |
>= 9+ |
>= 4+ |
>= 5+ |
>= 5+ |
>= 10+ |
| border-bottom-right-radius |
>= 9+ |
>= 4+ |
>= 5+ |
>= 5+ |
>= 10+ |
| border-image |
>= 11+ |
>= 15+ |
>= 16+ |
>= 6+ |
>= 11+ |
| border-image-outset |
>= 11+ |
>= 15+ |
>= 15+ |
>= 6+ |
>= 15+ |
| border-image-repeat |
>= 11+ |
>= 15+ |
>= 15+ |
>= 6+ |
>= 15+ |
| border-image-slice |
>= 11+ |
>= 15+ |
>= 15+ |
>= 6+ |
>= 15+ |
| border-image-source |
>= 11+ |
>= 15+ |
>= 15+ |
>= 6+ |
>= 15+ |
| border-image-width |
>= 11+ |
>= 13+ |
>= 15+ |
>= 6+ |
>= 15+ |
| border-radius |
>= 9+ |
>= 4+ |
>= 5+ |
>= 5+ |
>= 10+ |
| border-top-left-radius |
>= 9+ |
>= 4+ |
>= 5+ |
>= 5+ |
>= 10+ |
| border-top-right-radius |
>= 9+ |
>= 4+ |
>= 5+ |
>= 5+ |
>= 10+ |
| box-align |
不支持 |
-moz- |
-webkit- |
-webkit- |
不支持 |
| box-direction |
不支持 |
-moz- |
-webkit- |
-webkit- |
不支持 |
| box-flex |
不支持 |
-moz- |
-webkit- |
-webkit- |
不支持 |
| box-flex-group |
不支持 |
不支持 |
不支持 |
不支持 |
不支持 |
| box-lines |
不支持 |
不支持 |
不支持 |
不支持 |
不支持 |
| box-ordinal-group |
不支持 |
-moz- |
-webkit- |
-webkit- |
不支持 |
| box-orient |
不支持 |
-moz- |
-webkit- |
-webkit- |
不支持 |
| box-pack |
不支持 |
-moz- |
-webkit- |
-webkit- |
不支持 |
| box-shadow |
>= 9+ |
>= 4+ |
>= 10+ |
>= 5+ |
>= 10+ |
| box-sizing |
>= 8+ |
-moz- |
>= 10+ |
>= 5+ |
>= 9+ |
| column-fill |
不支持 |
-moz- |
不支持 |
不支持 |
不支持 |
| column-gap |
>= 10+ |
-moz- |
-webkit- |
-webkit- |
>= 11+ |
| column-rule |
>= 10+ |
-moz- |
-webkit- |
-webkit- |
>= 11+ |
| column-rule-color |
>= 10+ |
-moz- |
-webkit- |
-webkit- |
>= 11+ |
| column-rule-style |
>= 10+ |
-moz- |
-webkit- |
-webkit- |
>= 11+ |
| column-rule-width |
>= 10+ |
-moz- |
-webkit- |
-webkit- |
>= 11+ |
| column-span |
>= 10+ |
不支持 |
-webkit- |
-webkit- |
>= 11+ |
| column-width |
>= 10+ |
-moz- |
-webkit- |
-webkit- |
>= 11+ |
| columns |
>= 10+ |
-moz- |
-webkit- |
-webkit- |
>= 11+ |
| column-count |
>= 10+ |
-moz- |
-webkit- |
-webkit- |
>= 11+ |
| @font-face |
>= 9+ |
>= 3+ |
>= 4+ |
>= 3+ |
>= 10+ |
| font-size-adjust |
不支持 |
>= 2+ |
不支持 |
不支持 |
不支持 |
| font-stretch |
不支持 |
不支持 |
不支持 |
不支持 |
不支持 |
| grid-columns |
不支持 |
不支持 |
不支持 |
不支持 |
不支持 |
| grid-rows |
不支持 |
不支持 |
不支持 |
不支持 |
不支持 |
| hanging-punctuation |
不支持 |
不支持 |
不支持 |
不支持 |
不支持 |
| icon |
不支持 |
不支持 |
不支持 |
不支持 |
不支持 |
| nav-down |
不支持 |
不支持 |
不支持 |
不支持 |
>= 11+ |
| nav-index |
不支持 |
不支持 |
不支持 |
不支持 |
>= 11+ |
| nav-left |
不支持 |
不支持 |
不支持 |
不支持 |
>= 11+ |
| nav-right |
不支持 |
不支持 |
不支持 |
不支持 |
>= 11+ |
| nav-up |
不支持 |
不支持 |
不支持 |
不支持 |
>= 11+ |
| opacity |
>= 9+ |
>= 2+ |
>= 4+ |
>= 3+ |
>= 9+ |
| outline-offset |
不支持 |
>= 3+ |
>= 4+ |
>= 3+ |
>= 11+ |
| overflow-style |
不支持 |
不支持 |
不支持 |
不支持 |
不支持 |
| overflow-x |
>= 9+ |
>= 2+ |
>= 4+ |
>= 3+ |
>= 9+ |
| overflow-y |
>= 9+ |
>= 2+ |
>= 4+ |
>= 3+ |
>= 9+ |
| perspective |
>= 10+ |
>= 16+ |
-webkit- |
-webkit- |
>= 23+ |
| perspective-origin |
>= 10+ |
-moz- |
-webkit- |
-webkit- |
>= 23+ |
| perspective-trim |
不支持 |
不支持 |
不支持 |
不支持 |
不支持 |
| resize |
不支持 |
-moz- |
>= 4+ |
>= 4+ |
>= 15+ |
| rotation |
不支持 |
不支持 |
不支持 |
不支持 |
不支持 |
| rotation-point |
不支持 |
不支持 |
不支持 |
不支持 |
不支持 |
| target |
不支持 |
不支持 |
不支持 |
不支持 |
不支持 |
| target-name |
不支持 |
不支持 |
不支持 |
不支持 |
不支持 |
| target-new |
不支持 |
不支持 |
不支持 |
不支持 |
不支持 |
| target-position |
不支持 |
不支持 |
不支持 |
不支持 |
不支持 |
| text-emphasis |
不支持 |
不支持 |
不支持 |
不支持 |
不支持 |
| text-justify |
>= 5+ |
不支持 |
不支持 |
不支持 |
不支持 |
| text-outline |
不支持 |
不支持 |
不支持 |
不支持 |
不支持 |
| text-overflow |
>= 6+ |
>= 7+ |
>=4+ |
>= 3+ |
>= 11+ |
| text-shadow |
>= 10+ |
>= 3+ |
>= 4+ |
>= 4+ |
>= 9+ |
| text-wrap |
不支持 |
不支持 |
不支持 |
不支持 |
不支持 |
| transform |
>= 10+ |
>= 16+ |
-webkit- |
-webkit- |
>= 12+ |
| transform-origin |
>= 10+ |
>= 16+ |
-webkit- |
-webkit- |
>= 12+ |
| transform-style |
>= 11+ |
>= 16+ |
-webkit- |
-webkit- |
>= 23+ |
| transition |
>= 10+ |
>= 16+ |
>= 26+ |
-webkit- |
>= 12+ |
| transition-property |
>= 10+ |
>= 16+ |
>= 26+ |
-webkit- |
>= 12+ |
| transition-duration |
>= 10+ |
>= 16+ |
>= 26+ |
-webkit- |
>= 12+ |
| transition-timing-function |
>= 10+ |
>= 16+ |
>= 26+ |
-webkit- |
>= 12+ |
| transition-delay |
>= 10+ |
>= 16+ |
>= 26+ |
-webkit- |
>= 12+ |
| word-break |
>= 5+ |
>= 15+ |
>=4+ |
>= 3+ |
>= 15+ |
| word-wrap |
>=5+ |
>=3+ |
>=4+ |
>= 3+ |
>=10+ |
处理 CSS 兼容性需要给属性添加前缀
- IE 内核浏览器：添加前缀 -ms- 修饰样式属性
- FireFox 内核浏览器：添加前缀 -moz- 修饰样式属性
- Chrome 内核浏览器：添加前缀 -webkit- 修饰样式属性
- Opera 内核浏览器：添加前缀 -o- 修饰样式属性
学后归纳
在学习过程中没必要把所有 CSS 选择器和样式属性全部记住，只需要掌握最基本的使用即可，能够理解盒子模型以及页面样式基本呈现，对于一些复杂的 CSS 3 效果可以去查询一些网上资料，没必要花时间去学习，业余时间可以研究。
另外，随着互联联网的高速发展，前端框架更是如井喷涌而出，没必要增加学习成本，对于 HTML 5 和 CSS 3 只要求了解即可，现在的前端工程师大部分都要求懂点后端编程，要善于借用别人的代码，站在别人的肩膀上肯定能看的远些。
推荐几个学习网站
-
W3Cschool: https://www.w3cschool.cn/
-
菜鸟教程：https://www.runoob.com/
-
17 素材：https://www.17sucai.com/
