border-radius 边框圆角效果
书写格式：border-radius: 左上角 右上角 右下角 左下角;border-radius样式对应的四个值，分别对应左上角、右上角、右下角和左下角的圆角值。
示例代码：
.demo {
border-radius: 10px 20px 30px 40px;
/**如果四个角的圆角值相同，则可以简写如下 */
border-radius: 10px;
}box-shadow 盒子边框阴影
box-shadow是向盒子添加阴影，只是添加多个阴影。
书写格式：box-shadow: x轴偏移量 y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色 投影方式。
原点位置：盒子的左上角，向右为 x 正值，向下为 y 正值。
x 轴偏移量：可以为负值。
y 轴偏移量：可以为负值。
阴影模糊半径：可选参数，只能为正值，其值越大，模糊程度越大。
阴影扩展半径：可选参数，可为负值，正值整个阴影延展扩大，负值则缩小。
投影方式：投影方式分为两种，inset表示内阴影，outset表示外阴影，默认值是outset。
示例代码：
.demo {
box-shadow: 2px 3px 4px 2px #000 inset;
}text-shadow 字体阴影
书写格式：text-shodow: x轴偏移量 y轴偏移量 模糊程度 阴影颜色。
x 轴偏移量、y 轴偏移量、模糊程度、阴影颜色对应的含义和box-shadow基本相同。
示例代码：
.demo {
text-shadow: 2px 1px 3px red;
}border-image 边框图片
设置 border 边框背景图片。
书写格式：border-image:url(xx.png) 上边距 右边距 下边距 左边距 展示方式。
展示方式：表示图片的展示方式，可以有 repeat（重复）、no-repeat（不重复）、round（平铺）、stretch（拉伸）。
示例代码：
.demo {
border-image: url(xx.png) 10px 10px 10px 10px no-repeat;
}linear-gradient 渐变色彩
CSS3 中的 gradient 分为线性渐变和径向渐变，linear-gradient 表示的是线性渐变。
书写格式：linear-gradient:(描述或角度 两个及以上颜色代码)。
描述和角度：
| 角度 | 英文描述 | 作用 |
|---|---|---|
| 0deg | to top | 从下向上 |
| 90deg | to right | 从左到右 |
| 180deg | to bottom | 从上到下 |
| 270deg | to left | 从右到左 |
| / | to top left | 从右下角到左上角 |
| / | to right top | 从左下角到右上角 |
| / | to right bottom | 从左上角到右下角 |
| / | to left bottom | 从右上角到左下角 |
示例代码：
.demo {
background-image: linear-gradient(to top left, green, yellow, red);
}text-overflow 设置内容单行省略号展示
text-overflow 有两个属性，分别是 clip 和 ellipsis，分别表示剪切和显示省略号。
注意：如果要实现省略号，上面的单个属性是完成不了的，固定的组合如下：
.demo {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}@font-face 嵌入字体
@font-face能够加载服务器端的字体文件，让浏览器端可以显示用户电脑里没有安装的字体。
书写格式：
/**导入字体 */
@font-face {
// 字体名称
font-family: "MOOC Font",
// 字体文件在服务器上的相对或绝对路径
src: url("http://www.imooc.com/Amaranth-BoldItalic.otf")
}
/**使用字体 */
.demo {
font-family:"MOOC Font"
}background-origin 背景起始位置
书写格式：background-origin: border-box | padding-box | content-box。
border-box：背景图片的左上角和 border 外边框对齐；
padding-box：背景图片的左上角和 padding 内边框对齐；
content-box：背景图片的左上角和内容区内边框对齐。
注意：背景需要时no-repeat，否则此属性无法生效。
示例代码：
.demo {
background: url(xxx.png) no-repeat;
background-origin: content-box;
}background-clip 背景图裁剪方式
书写格式：background-clip: border-box | padding-box | content-box | no-clip。
border-box：从 border 的外边距裁剪；
padding-box：从 padding 的外边框裁剪；
content-box：从内容区域向外裁剪；
no-clip：表示不裁剪。
示例代码：
.demo {
background: url(xxx.png) no-repeat;
background-origin: border-box;
background-clip: content-box;
}background-size 背景图片大小
设置背景图片的大小，以长度值或百分比显示，还可以通过 cover 和 contain 来对图片进行伸缩。
书写格式：background-size:auto | 长度 | 百分比 | cover | contain。
auto：默认值，不改变背景图片的原始高度和宽度；
长度值：成对出现如 200px 50px，将背景图片宽高依次设置为前面两个值，当设置一个值时，将其作为图片宽度值来等比缩放；
百分比：0％~100％之间的任何值，将背景图片宽高依次设置为所在元素宽高乘以前面百分比得出的数值，当设置一个值时同上；
cover：顾名思义为覆盖，即将背景图片等比缩放以填满整个容器；
contain：容纳，即将背景图片等比缩放至某一边紧贴容器边缘为止。
示例代码：
.demo {
background: url(xxx.png) no-repeat;
width: 300px;
height: 140px;
border: 1px solid #999;
background-size: cover;
}属性选择器
CSS2 中就有属性选择器，是针对确定的属性名，在 CSS3 中对其进行了拓展，增加了三种通配符模糊匹配。如下：
| 属性选择器 | 功能描述 |
|---|---|
| E[attr^=’val’] | 选择匹配元素 E（标签名），且 E 元素定义了属性 attr，其属性值是以 val 开头的任何字符串 |
| E[attr$=’val’] | 选择匹配元素 E（标签名），且 E 元素定义了属性 attr，其属性值是以 val 结尾的任何字符串 |
| E[attr*=’val’] | 选择匹配元素 E（标签名），且 E 元素定义了属性 attr，其属性值是包含 val 的任何字符串 |
示例代码：
div[class^="demo"] {
color: red;
}
div[class$="val"] {
color: red;
}
div[class*="mo"] {
color: red;
}伪类选择器-根选择器：root
root选择器，很清楚的理解是根选择器，他的意思就是匹配元素 E 所在文档的根元素。在 HTML 文档中，根元素始终是<html>。
示例代码：
:root {
background: orange;
}
/**等价于 */
html {
background: orange;
}伪类选择器-否定选择器：not
伪类选择器not，可以选择除某个元素之外的所有元素。
书写格式：E:not([class="demo"])，E 表示标签名称，class 代指属性名称，可以是 name、id、type 等，demo 是对应的属性值。
示例代码：
/**除密码输入框，其他input输入框都设置边框 */
input:not([type="password"]) {
border: 1px solid red;
}伪类选择器-空值选择器：empty
表示选定的标签内没有值（包括空格也不能有），此时会被选中。
书写格式：E:empty，E 表示标签名称。
示例代码：
div:empty {
background: green;
}伪类选择器：first-child
first-child表示选择父元素下的第一个子元素（注意是子元素，不是后代元素）。
书写格式：F > E:first-child，F 表示父元素的标签名或者类名等，E 表示子元素的标签名。
示例代码：
ul > li:first-child {
background: red;
}伪类选择器：last-child
last-child和first-child是相对的，表示父元素下的最后一个子元素。
书写格式：F > E:last-child。
示例代码：
ul > li:last-child {
background: red;
}说明：first-child 和 last-child 经常被使用的列表中，比如设置横向列表中间的分隔符，当设置左侧边框，会导致第一个元素左侧边框是多于的，同理设置右侧边框也有这个问题，这个时候就可以使用这两个选择器，实现去掉不需要的边框内容。
伪类选择器：nth-child(n)
:nth-child(n)选择器用来定位某个父元素的一个或多个特定的子元素。其中“n”是其参数，而且可以是整数值(1,2,3,4)，也可以是表达式(2n+1、-n+5)和关键词(odd-奇数、even-偶数)，但参数 n 的起始值始终是 1，而不是 0。也就是说，参数 n 的值为 0 时，选择器将选择不到任何匹配的元素。
书写格式：F > E:nth-child(n)，F 表示父元素。
经验与技巧：当:nth-child(n)选择器中的 n 为一个表达式时，其中 n 是从 0 开始计算，当表达式的值为 0 或小于 0 的时候，不选择任何匹配的元素。如下表所示：
| n | 2n(偶数:even) | 2n+1(奇数：odd) | 4n+1 | 4n | 5n-2 | -n+3 |
|---|---|---|---|---|---|---|
| 0 | 0 | 1 | 1 | 0 | - | 3 |
| 1 | 2 | 3 | 5 | 4 | 3 | 2 |
| 2 | 4 | 5 | 9 | 8 | 8 | 1 |
| 3 | 6 | 7 | 13 | 12 | 13 | 0 |
| 4 | 8 | 9 | 17 | 16 | 18 | -1 |
| 5 | 10 | 11 | 21 | 20 | 23 | -2 |
示例代码：
/**可以用于多行或者多列元素，间隔颜色设置 */
ul > li:nth-child(2n) {
backgroud: #f1f1f1;
}伪类选择器：nth-last-child(n)
nth-last-child和nth-child相对应，nth-child是从第一个开始，nth-last-child是从倒数第一个开始。
书写格式：F > E:nth-last-child(n)。
示例代码：
ul > li:nth-last-child(2n + 1) {
background: #f1f1f1;
}伪类选择器：first-of-type
first-of-type用来指定父元素下某个类型的标签中第一个元素。比如父标签下有 div、p 两种标签，两种标签乱序书写，这个时候需要找第一个 p 标签，就可以用这个方式来实现。
书写格式：F > E:first-of-type。
示例代码：
.demo > p:first-of-type {
background: red;
}伪类选择器：last-of-type
last-of-type和first-of-type类似，一个是从前向后查找，一个是从后往前查找。
书写格式：F > E:last-of-type。
示例代码：
div > div:last-of-type {
color: green;
}伪类选择器：nth-of-type(n)
nth-of-type和nth-child类似，nth-of-type更为精准的定位对应的标签类型，nth-child是父标签下的所有子标签。
书写格式：F > E:nth-of-type(n)，参数 n 的取值方式和nth-child是相同的。
示例代码：
div > p:nth-of-type(2n) {
background: red;
}伪类选择器：nth-last-of-type(n)
nth-last-of-type和nth-of-type是相对的，一个从后往前查找，一个是从前往后查找。
书写格式：F > E:nth-last-of-type(n)。
示例代码：
div > span:nth-last-of-type(2n) {
color: red;
width: 10px;
height: 10px;
display: inline-block;
}伪类选择器：only-child
only-child表示当前父类选择器有且仅有一个子元素时被命中。
书写格式：F E:only-child或者F > E:only-child。
示例代码：
/**表示ul标签下只有一个子元素，且这个子元素是li标签时，应用此样式 */
ul > li:only-child {
background: red;
}伪类选择器：only-of-type
only-of-type表示当前父类元素下有一个或多个子元素，可能会有不同类型的标签，但是指定的标签类型有且只有一个的时候命中。
书写格式：F > E:only-of-type。
示例代码：
/**表示div标签下有且仅有一个p标签时，将其背景色设置为红色 */
div > p:only-of-type {
background: red;
}伪类选择器：enabled、disabled
针对当前标签是否可用设置样式，比如 input 标签的可用和不可用状态下的样式。
书写格式：E:enabled | disabled。
示例代码：
.demo:enabled {
border: 1px solid #f36;
}
#only-id:disabled {
border: 1px solid #666;
}伪类选择器：checked
checked表示在选中的时候展示的样式。
书写格式：E:checked。
示例代码：
/**表示id为icon的标签被选中后展示的样式 */
#icon:checked {
color: green;
}伪类选择器：selection
::selection表示当前被选中的文字显示不同的样式，如一段文字被选中，背景色调整为绿色，文字调整成红色。
书写格式：E::selection。
示例代码：
.demo::selection {
background: green;
color: red;
}伪类选择器：read-only、read-write
read-only：简单的理解就是这种选择器指定的样式针对设置了 readonly 属性的标签生效。read-write：刚好的read-only相反，两种样式可以配合使用，根据不同状态展示不同效果。
书写格式：E:read-only、E:read-write。
示例代码：
.demo:read-only {
background: #e1e1e1;
color: #999;
}
.demo:read-write {
background: #fff;
color: #333;
}伪类选择器：after、before
::before和::after这两个主要用来给元素的前面或后面插入内容，这两个常和”content”配合使用，使用的场景最多的就是清除浮动或者添加前后小图标。
书写格式：E::before。
示例代码：
/**在使用before、after的时候必须要设置content属性，一般都是为空字符串 */
.demo::before {
content: "";
width: 10px;
height: 10px;
background: red;
}transform 旋转 rotate
旋转rotate()函数通过指定的角度参数使元素相对原点进行旋转。它主要在二维空间内进行操作，设置一个角度值，用来指定旋转的幅度。如果这个值为正值，元素相对原点中心顺时针旋转；如果这个值为负值，元素相对原点中心逆时针旋转。
书写格式：transform:rotate(角度)。
示例代码：
/**deg表示度数的意思，这里旋转需要时块级元素（block或者inline-block） */
.demo {
transform: rotate(40deg);
}transform 扭曲 skew
以图形的中心点为原点建立 X、Y 轴，按照指定的参数，分别按照两个轴进行扭曲。
书写格式：transform: skew(x,y)，沿 x 轴旋转一定角度，沿 y 轴旋转一定角度。
示例代码：
.demo {
transform: shew(20deg, 30deg);
}transform 缩放 scale、scaleX、scaleY
默认是根据中心点进行缩放，scale 的第一个参数表示的是横向缩放，第二个参数表示纵向缩放，也可以只指定一个参数，表示横向和纵向都按照同等比例的缩放。scaleX 表示横向缩放，scaleY 表示纵向的缩放。
书写格式：transform: scale(X,Y) | transform: scaleX(X) | transform: scale(Y)。
示例代码：
/**横向缩小0.5倍，纵向缩小0.6倍 */
.demo {
transform: scale(0.5, 0.6);
}
/**横向和纵向同等缩小0.5倍 */
.demo {
transform: scale(0.5);
}
/**横向缩小0.5倍，纵向不变 */
.demo {
transform: scaleX(0.5);
}
/**横向不变，纵向缩小0.5倍 */
.demo {
transform: scaleY(0.5);
}transform-origin 变形原点
默认在进行扭曲、缩放、旋转等操作的时候，相对的原点是元素的中心点。为了满足需求，可以通过transform-origin来指定变形原定位置。
书写格式：transform-origin:left | right | bottom | top | left top | right top | left bottom | right bottom。
示例代码：
.demo {
transform: scale(0.5);
transform-origin: left top;
}元素位移 translate、translateX、translateY
相对于原来的位置进行位移操作，translate 提供了两个值，分别是 X 方向和 Y 方向，translateX 表示在 X 方向上移动，translateY 表示在 Y 方向上移动。
书写格式：transform:translate(x,y) | translateX(x) | translateY(y)。
示例代码：
/**此中样式比较适合弹窗，在页面中央显示 */
.demo {
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
transform: translate(50%, 50%);
}过渡属性 transition
过渡属性分为四个部分，分别是transition-property(过渡效果涉及的 CSS 属性)、transition-duration(完成过渡效果所需时间)、transition-timing-function(过渡函数)、transition-dely(动画效果延迟时间)。在实现过渡效果的时候，可以将四个部分分开写，也可以合在一起写。
书写格式：transition:css属性 时间 过渡函数 延迟时间。
示例代码：
/**合并到一起的书写方式 */
.demo {
background-color: red;
transition: background 1s ease-in 0.2s;
}
/**分开书写 */
.demo {
transition-property: background;
transition-duration: 1s;
transition-timing-function: ease-in;
transition-delay: 0.2s;
}
.demo:hover {
background: green;
}过渡函数 transition-timing-function：
|函数名称|功能描述|
| :–: | :–: |
|ease|默认值，从初始状态到终止状态，速度之间变慢，逐渐变慢|
|linear|从初始状态到终止状态，采用恒定的速度|
|ease-in|从初始状态到终止状态，速度越来越快，是一种加速状态，称为渐显效果|
|ease-out|从初始状态到终止状态，速度越来越慢，是一种减速状态，称为渐隐效果|
|ease-in-out|从初始状态到终止状态，先加速再减速，称为渐显渐隐效果|
动画效果：@keyframes
@keyframes用于定义动画的关键帧。
书写格式：
/**frameName表示定义的动画关键帧名称 */
@keyframes frameName {
0% {
/**样式 */
}
/**根据不同粒度指定样式 */
100% {
/**样式 */
}
}示例代码：
@keyframes frameName {
0% {
background: red;
}
50% {
background: green;
}
100% {
background: yellow;
}
}动画效果：animation-name、animation-duration
在具体元素中定义 css 样式，并通过animation-name指定对应动画名称，通过animation-duration指定动画时间。
书写格式：animation-name: 动画关键帧名称、animation-duration: 时间。
示例代码：
.demo {
animation-name: frameName;
animation-duration: 1s;
}动画效果：animation-timing-function
animation-timing-function表示动画的播放方式，采用的取值和transition-timing-function形同。
|函数名称|功能描述|
| :–: | :–: |
|ease|默认值，从初始状态到终止状态，速度之间变慢，逐渐变慢|
|linear|从初始状态到终止状态，采用恒定的速度|
|ease-in|从初始状态到终止状态，速度越来越快，是一种加速状态，称为渐显效果|
|ease-out|从初始状态到终止状态，速度越来越慢，是一种减速状态，称为渐隐效果|
|ease-in-out|从初始状态到终止状态，先加速再减速，称为渐显渐隐效果|
书写格式：animation-timing-function: ease;。
示例代码：
.demo {
animation-timing-function: ease;
}动画效果：animation-iteration-count
animation-iteration-count指定播放次数，默认是 1 次。
书写格式：animation-iteration-count: number | infinite。当取值为 infinite 的时候，表示无限循环播放。
示例代码：
.demo {
animation-iteration-count: infinite;
}动画效果：animation-direction
animation-direction指定动画播放的方向，取值为 normal、alternate、reverse、alternate-reverse。
- normal：默认值，表示动画每次循环都是向前播放。
- alternate：动画播放的第偶数次向前播放，第奇数次向反方向播放。
- reverse：与 normal 相反。
- alternate-reverse：与 alternate 相反。
书写格式：animation-direction:normal | alternate | reverse | alternate-reverse。
示例代码：
.demo {
animation-direction: alternate;
}动画效果：animation-fill-mode
animation-fill-mode 属性定义在动画开始之前和结束之后发生的操作。主要具有四个属性值：none、forwards、backwords 和 both。其四个属性值对应效果如下：
| 属性值 | 效果 |
|---|---|
| none | 默认值，表示动画将按预期进行和结束，在动画完成其最后一帧时，动画会反转到初始帧处 |
| forwards | 表示动画在结束后继续应用最后的关键帧的位置 |
| backwards | 会在向元素应用动画样式时迅速应用动画的初始帧 |
| both | 元素动画同时具有 forwards 和 backwards 效果 |
书写格式：animation-fill-mode: none | forwards | backwards | both。
示例代码：
.demo {
animation-fill-mode: both;
}动画效果：animation
在动画效果中分为很多子属性，可以通过分开写的方式实现，也可以只定义一个 animation 属性，将子属性进行合并。
书写格式：animation: name duration delay timing-function iteration-count direction fill-mode。
示例代码：
@keyframes myframe {
0% {
background: red;
}
20% {
background: green;
}
40% {
background: yellow;
}
60% {
background: #231544;
}
80% {
background: #4d5a2f;
}
100% {
background: #0d2a1b;
}
}
.demo {
width: 100px;
heigh: 100px;
animation: myframe 4s 1s linear infinite alternate both;
}CSS3 兼容性问题
在很多浏览器中，对 CSS3 兼容不是很友好，在直接使用 CSS3 的样式时，会出现不生效的情况，因此需要在这些属性前加上对应的前缀。如何加如下表：
| 前缀 | 浏览器 | 示例代码 |
|---|---|---|
| -webkit | chrome 和 safari | -webkit-transition |
| -moz | firefox | -moz-animation |
| -ms | IE | -ms-animation |
| -o | opera | -o-animation |
也就是意味着，在实际开发中，使用到这些 CSS3 新特性，就要重复写五遍，以达到兼容效果。如下示例：
.demo {
transition: all 1s ease-in;
-webkit-transition: all 1s ease-in;
-moz-transition: all 1s ease-in;
-ms-transition: all 1s ease-in;
-o-transition: all 1s ease-in;
}
