border-radius
圆角是做网页永远绕不过的话题，以前基本是通过背景图片做的，有了 CSS3 以后通过属性就 能够搞定，我们可以通过 border-radius 设置元素的圆角半径。
border-radius: 5px;对于一个正方形，我们只需要设置为边长的一半就可以呈现一个圆。
div {
width: 200px;
height: 200px;
border-radius: 50%; // 设置百分比
border-radius: 100px; // 设置长度一半
}border-radius 是缩写的格式，其实 border-radius 和 border 属性一样，还可以把各个角单独拆分出来，也就是以下四种写法
border-top-left-radius: length, length;
border-top-right-radius: length, length;
border-bottom-left-radius: length, length;
border-bottom-right-radius: length, length;第一个值是圆角水平半径，第二个值是垂直半径,如果第二个值省略，那么其等于第一个值，这时这个角就是一个四分之一的圆角，如果任意一个值为0，那么这个角就不是圆角
box-shadow
CSS3 原生支持了阴影效果
box-shadow:inset h-shadow v-shadow blur-radius spread-radius colorbox-shadow 属性至多有6个参数设置：
- 阴影类型：此参数是一个可选值，如果不设值，其默认的投影方式是外阴影；如果取其唯一值inset,就是将外阴影变成内阴影
- h-shadow: 是指阴影水平偏移量其值可以是正负值可以取正负值，如果值为正值，则阴影在对象的右边，反之其值为负值时，阴影在对象的左边
- v-shadow: 是指阴影的垂直偏移量，其值也可以是正负值，如果为正值，阴影在对象的底部，反之其值为负值时，阴影在对象的顶部
- 阴影模糊距离：此参数是可选，，但其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊
- 阴影阴影的尺寸：此参数可选，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值是，则缩小
- 阴影颜色：此参数可选，如果不设定任何颜色时，浏览器会取默认色，但各浏览器默认色不一样
box-shadow 可以使用一个或多个投影，如果使用多个投影时必须需要用逗号,分开
box-shadow: 3px 3px 3px orange, 3px 3px 3px red;box-sizing
这个属性多少和边框也相关，传统的盒模型width就是指内容区域宽度，和padding、border没有关系，但是这在布局上带来一定的困难
box-sizing 可以改变盒模型
- content-box：标准盒模型
- border-box：
width = padding-left + padding-right + border-left-width + border-right-width + content width
height = padding-top + padding-bottom + border-top-width + border-bottom-width + content height
div {
width: 100px; // width 包含了左右padding的宽度 + 左右border的宽度
height: 100px; // height 包含了上下padding的宽度 + 上下border的宽度
padding: 20px;
border: 1px solid #000;
box-sizing: border-box;
}text-overflow
- clip：隐藏超出文本
- ellipsis：显示省略符号来代表被修剪的文本。
对于省略号效果还需要其它属性配合
p {
width: 100px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}担心会有人提问上面的代码只能在第一行显示省略号，假如我想在第二行或者第三行显示怎么办呢？
原理就是通过伪元素 ::after 来实现是不是非常的 easy。
过渡和动画
CSS3 的动画是浏览器原生支持的，好处就是流畅
transition（过渡）
在CSS3引入 transition 之前css没有时间轴，所有的状态变化都是瞬间完成。
transition 的作用在于，指定状态变化所需要的时间
div {
width: 100px;
height: 100px;
border: 1px solid #000;
background-color: #000;
transition: all 1s;
}
div:hover {
width: 200px;
height: 200px;
}指定属性
我们还可以指定transition适用的属性
div {
transition: 1.5s width;
}这样一来，只有height的变化需要1秒实现，其他变化（主要是width）依然瞬间实现。
在同一行transition语句中，可以分别指定多个属性
div {
transition: 1.5s width, 1s height;
}delay
delay：中文翻译延迟，顾名思义就是延迟多长时间在执行状态变化。
需要注意的是 delay的参数是在时间的后面
div {
transition: 状态完成时间 height, 状态完成时间 延迟时间(delay) width;
}div {
transition: 2s height, 0.5s 2s width;
}delay的真正意义在于，它指定了动画发生的顺序，使得多个不同的transition可以连在一起，形成复杂效果
transition-timing-function
transition的状态变化速度（又称timing function），默认不是匀速的，而是逐渐放慢，这叫做ease
div {
transition: 1s ease;
}除了ease以外，其他模式还包括
- linear：匀速
- ease-in：加速
- ease-out：减速
- ease-in-out：规定以慢速开始和结束的过渡效果
- cubic-bezier函数：自定义速度模式 链接
注意事项
- 目前，各大浏览器（包括IE 10）都已经支持无前缀的transition，所以transition已经可以很安全地不加浏览器前缀 transition兼容性
- transition需要明确知道，开始状态和结束状态的具体数值，才能计算出中间状态，什么none到block之类的是不行的
- transition是一次性的，不能重复发生，除非一再触发。