CSS3

圆角边框

border-radius:圆角半径
box-shadow:盒阴影 （右偏移量，下偏移量，阴影半径，阴影颜色）
border-image:边界图片(图片地址，图像边界向内偏移，图像宽度，指定图像是重复拉伸还是铺满)

div{
	border:2px solid;
	border-radius:25px;
	box-shadow: 10px 10px 5px #888888;
	border-image:url(border.png) 30 30 round;
}

背景

补充：CSS3 多重背景(multiple backgrounds)
多重背景，也就是CSS2里background的属性外加origin、clip和size组成的新background的多次叠加，缩写时为用逗号隔开的每组值；用分解写法时，如果有多个背景图片，而其他属性只有一个（例如background-repeat只有一个），表明所有背景图片应用该属性值。
语法缩写如下：
background ： [background-color] | [background-image] | [background-position][/background-size] | [background-repeat] | [background-attachment] | [background-clip] | [background-origin],…
可以把上面的缩写拆解成以下形式：
background-image:url1,url2,…,urlN;
background-repeat : repeat1,repeat2,…,repeatN;
backround-position : position1,position2,…,positionN;
background-size : size1,size2,…,sizeN;
background-attachment : attachment1,attachment2,…,attachmentN;
background-clip : clip1,clip2,…,clipN;
background-origin : origin1,origin2,…,originN;
background-color : color;
注意：

用逗号隔开每组 background 的缩写值；
如果有 size 值，需要紧跟 position 并且用 “/” 隔开；
如果有多个背景图片，而其他属性只有一个（例如 background-repeat 只有一个），表明所有背景图片应用该属性值。
background-color 只能设置一个。
背景剪裁
CSS3中background-clip背景剪裁属性是从指定位置开始绘制。

#example1 { 
    border: 10px dotted black; 
    padding: 35px; 
    background: yellow; 
    background-clip: content-box; 
}

CSS 渐变
线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
径向渐变（Radial Gradients）- 由它们的中心定义
从上到下的线性渐变

#grad {
  background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */
  background: linear-gradient(red, blue); /* 标准的语法 */
}

从左到右的线性渐变

#grad {
  background: -webkit-linear-gradient(left, red , blue); /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(right, red, blue); /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(right, red, blue); /* Firefox 3.6 - 15 */
  background: linear-gradient(to right, red , blue); /* 标准的语法 */
}

从左上到右下

#grad {
  background: -webkit-linear-gradient(left top, red , blue); /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(bottom right, red, blue); /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(bottom right, red, blue); /* Firefox 3.6 - 15 */
  background: linear-gradient(to bottom right, red , blue); /* 标准的语法 */
}

带有指定角度的线性渐变

#grad {
  background: -webkit-linear-gradient(180deg, red, blue); /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(180deg, red, blue); /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(180deg, red, blue); /* Firefox 3.6 - 15 */
  background: linear-gradient(180deg, red, blue); /* 标准的语法 */
}

多个颜色节点的线性渐变

#grad {
  background: -webkit-linear-gradient(red, green, blue); /* Safari 5.1 - 6.0 */
  background: -o-linear-gradient(red, green, blue); /* Opera 11.1 - 12.0 */
  background: -moz-linear-gradient(red, green, blue); /* Firefox 3.6 - 15 */
  background: linear-gradient(red, green, blue); /* 标准的语法 */
}

颜色节点均匀的径向渐变

#grad {
  background: -webkit-radial-gradient(red, green, blue); /* Safari 5.1 - 6.0 */
  background: -o-radial-gradient(red, green, blue); /* Opera 11.6 - 12.0 */
  background: -moz-radial-gradient(red, green, blue); /* Firefox 3.6 - 15 */
  background: radial-gradient(red, green, blue); /* 标准的语法 */
}

颜色节点不均匀的径向渐变

#grad {
  background: -webkit-radial-gradient(red 5%, green 15%, blue 60%); /* Safari 5.1 - 6.0 */
  background: -o-radial-gradient(red 5%, green 15%, blue 60%); /* Opera 11.6 - 12.0 */
  background: -moz-radial-gradient(red 5%, green 15%, blue 60%); /* Firefox 3.6 - 15 */
  background: radial-gradient(red 5%, green 15%, blue 60%); /* 标准的语法 */
}

CSS3文本效果

text-shadow:文本阴影，属性和box-shadow类似
h-shadow v-shadow blur spread color insect
水平阴影 垂直阴影 模糊 阴影尺寸 颜色 外阴影转到内阴影
text-overflow:指定如何展示溢出内容
hanging-punctuation 规定标点字符是否位于线框之外
punctuation-trim 规定是否对标点字符进行修剪
text-align-last 设置如何对齐最后一行或紧挨着强制换行符之前的行
text-emphasis 向元素的文本应用重点标记以及重点标记的前景色
text-justify 规定当 text-align 设置为 “justify” 时所使用的对齐方法
text-outline 规定文本的轮廓
text-overflow 规定当文本溢出包含元素时发生的事情
text-shadow 向文本添加阴影
text-wrap 规定文本的换行规则
word-break 规定非中日韩文本的换行规则
word-wrap 允许对长的不可分割的单词进行分割并换行到下一行

CSS 2D转换

translate()平移
rotate()旋转
scale()缩放
skew()拉伸
matrix()
matrix(n,n,n,n,n,n) 定义 2D 转换，使用六个值的矩阵
translate(x,y) 定义 2D 转换，沿着 X 和 Y 轴移动元素
translateX(n) 定义 2D 转换，沿着 X 轴移动元素
translateY(n) 定义 2D 转换，沿着 Y 轴移动元素
scale(x,y) 定义 2D 缩放转换，改变元素的宽度和高度
scaleX(n) 定义 2D 缩放转换，改变元素的宽度
scaleY(n) 定义 2D 缩放转换，改变元素的高度
rotate(angle) 定义 2D 旋转，在参数中规定角度
skew(x-angle,y-angle) 定义 2D 倾斜转换，沿着 X 和 Y 轴
skewX(angle) 定义 2D 倾斜转换，沿着 X 轴
skewY(angle) 定义 2D 倾斜转换，沿着 Y 轴

3D转换

transform-origin 允许你改变被转换元素的位置
transform-style 规定被嵌套元素如何在 3D 空间中显示
perspective 规定 3D 元素的透视效果
perspective-origin 规定 3D 元素的底部位置
backface-visibility 定义元素在不面对屏幕时是否可见
matrix3d(n,n,n,n,n,n,
n,n,n,n,n,n,n,n,n,n) 定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate3d(x,y,z) 定义 3D 转化。
translateX(x) 定义 3D 转化，仅使用用于 X 轴的值。
translateY(y) 定义 3D 转化，仅使用用于 Y 轴的值。
translateZ(z) 定义 3D 转化，仅使用用于 Z 轴的值。
scale3d(x,y,z) 定义 3D 缩放转换。
scaleX(x) 定义 3D 缩放转换，通过给定一个 X 轴的值。
scaleY(y) 定义 3D 缩放转换，通过给定一个 Y 轴的值。
scaleZ(z) 定义 3D 缩放转换，通过给定一个 Z 轴的值。
rotate3d(x,y,z,angle) 定义 3D 旋转。
rotateX(angle) 定义沿 X 轴的 3D 旋转。
rotateY(angle) 定义沿 Y 轴的 3D 旋转。
rotateZ(angle) 定义沿 Z 轴的 3D 旋转。
perspective(n) 定义 3D 转换元素的透视视图。
3D立方体

.main{
	width: 200px;
	height: 200px;
	position:absolute;
	transform-style: preserve-3d;
	transform: translateZ(-100px);
	animation: rotate 10s infinite linear;
	transition: all 10s;
}

.main:hover{
	transform: rotate3d(1,1,1,3000deg) scale3d(1.5,1.5,1.5);
}

.main div{
    width:200px;
    height:200px;
    display:block;
    margin: 0; 
    position:absolute;  
    color:#fff;
    font-size:100px;
    font-weight:bold;
    text-align:center;
    line-height:190px;
    opacity:0.8;
    transition: all 5s;
}
.main .front{
	background:#1abc9c;
    transform:rotateY(0deg) translateZ(100px);
}
.main:hover .front{
    background:#1abc9c;
    transform:rotateY(0deg) translateZ(200px);
}
.main .back{
	background:#3498db;
    transform: rotateX(180deg) translateZ(100px);
}
.main:hover .back{
    background:#3498db;
    transform: rotateX(180deg) translateZ(200px);
}
.main .left{
	transform: rotateY(-90deg) translateZ(100px);
	background: #8e44ad;
}
.main:hover .left{
	background: #8e44ad;
    transform: rotateY(-90deg) translateZ(200px);
}
.main .right{
	background: #34495e;
	transform: rotateY(90deg) translateZ(100px);
}
.main:hover .right{
    background: #34495e;
	transform: rotateY(90deg) translateZ(200px);
}
.main .top{
	background: #f39c12;
	transform: rotateX(90deg) translateZ(100px);
}
.main:hover .top{
    background: #f39c12;
	transform: rotateX(90deg) translateZ(200px);
}
.main .bottom{
	background: #c0392b;
	transform: rotateX(-90deg) translateZ(100px);
}
.main:hover .bottom{
    background: #c0392b;
	transform: rotateX(-90deg) translateZ(200px);
}