欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

学习笔记 —— CSS 3 层叠样式知识归纳整理

程序员文章站 2024-03-25 16:50:28
...

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;
}
<ul class="main">
	<li>Coffee</li>
	<li>Tea</li>
	<li>Coca Cola</li>
</ul>

语法：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 class="main">
	<li>Coffee</li>
	<li>Tea</li>
	<li>Coca Cola</li>
</ul>

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 class="main">
	<li>Coffee</li>
	<li>Tea</li>
	<li>Coca Cola</li>
</ul>

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;
}
<table class="main">
	<tr>
        <th>Firstname</th>
        <th>Lastname</th>
	</tr>
    <tr>
        <td>Peter</td>
        <td>Griffin</td>
    </tr>
    <tr>
        <td>Lois</td>
        <td>Griffin</td>
    </tr>
</table>

table.main {
    border-collapse: collapse;
}
table.main {
    border-collapse: separate;
}

table.main {
    border-collapse: separate;
    border-spacing: 10px 50px;
}
<table class="main">
	<tr>
        <th>Firstname</th>
        <th>Lastname</th>
	</tr>
    <tr>
        <td>Peter</td>
        <td>Griffin</td>
    </tr>
    <tr>
        <td>Lois</td>
        <td>Griffin</td>
    </tr>
</table>

语法：caption-side: bottom | top

值 描述
top 默认值，把表格标题定位在表格之上
bottom 把表格标题定位在表格之下 
caption.main {
    caption-side: bottom;
}
<table>
	<caption class="main">Table 1.1 Customers</caption>
	<tr>
        <th>Firstname</th>
        <th>Lastname</th>
	</tr>
    <tr>
        <td>Peter</td>
        <td>Griffin</td>
    </tr>
    <tr>
        <td>Lois</td>
        <td>Griffin</td>
    </tr>
</table>

caption.main {
    caption-side: top;
}

语法：empty-cells: show | hide

值 描述
hide 不在空单元格周围绘制边框
show 在空单元格周围绘制边框，默认 
table.main {
    border-collapse: separate;
    empty-cells: hide;
}
<table class="main">
	<tr>
        <th>Firstname</th>
        <th>Lastname</th>
	</tr>
</table>

table.main {
    border-collapse: separate;
    empty-cells: show;
}

语法：table-layout: auto | fixed

值 描述
auto 默认，列宽度由单元格内容设定
fixed 列宽由表格宽度和列宽度设定 
table.main {
    border-collapse: separate;
    table-layout: fixed;
}
<table class="main">
	<tr>
        <th>Firstname</th>
        <th>Lastname</th>
	</tr>
</table>

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'
}
<div class="main">hello</div>

a.main:before {
	content: '(' attr(href) ')';
}
<a href="http://www.baidu.com/">百度一下</a>

q.main:lang(en) {
	quotes: "~" "~" "'" "'";
}
<p>q>This is a <q>big</q> quote.</q></p>

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;
}
<div class="main">使用 CSS3 定义的字体内容</div>

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;
}
<div class="main">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>

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;
}
<div class="main">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>

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;
}
<div class="main">Text-shadow effect</div>

语法：word-break: normal | break-all | keep-all;

值 描述
normal 使用浏览器默认的换行规则
break-all 允许在单词内换行
keep-all 只能在半角空格或连字符处换行 
div.main {
	width: 9em;
	border: 1px solid #000;
	word-break: normal;
}
<div class="main">This paragraph contains some text. This line will-break-at-hyphenates.</div>

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;
}
<div class="main">This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.</div>

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;
}
<div class="main">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>

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;
}
<div class="main">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>

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;
}
<div class="main">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.</div>

语法：column-gap: length | normal;

值 描述
ength 一个指定的长度，将设置列之间的差距
normal 指定一个列之间的普通差距， W3C建议1EM值 
div.main {
	columns:100px 3;
	column-gap:40px;
}
<div class="main">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.</div>

语法：column-span: 1 | all;

值 描述
1 元素应跨越一列
all 该元素应该跨越所有列 
div.main {
	columns:100px 3;
	column-gap:40px;
}
div.main h2 {
	column-span: all;
}
<div class="main">
<h2>英国维斯米斯特教堂碑文</h2>
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.</div>

语法：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;
}
<div class="main">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.</div>

语法：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; }
<div class="main">
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
</div>

语法：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; }
<div class="main">
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
</div>

语法：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; }
<div class="main">
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
</div>

语法：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; }
<div class="main">
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
</div>

语法：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; }
<div class="main">
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
</div>

语法：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; }
<div class="main">
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
</div>

语法：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; }
<div class="main">
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
</div>

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 只要求了解即可，现在的前端工程师大部分都要求懂点后端编程，要善于借用别人的代码，站在别人的肩膀上肯定能看的远些。

推荐几个学习网站

相关标签： 学习笔记 css3

上一篇： restful

下一篇： 什么是Restful？

推荐阅读