text-shadow
text-shadow支持文字阴影功能，简单利用CSS3属性增加文字的质感而不须使用任何图片
语法： text-shadow: h-shadow v-shadow blur color;
h-shadow 必需。水平阴影的位置。允许负值。(正右负左)
v-shadow 必需。垂直阴影的位置。允许负值。(正下负上)
blur 可选。模糊的距离。
color 可选。阴影的颜色。
text-shadow: 3px 3px 3px #999999;
所有主流浏览器都支持 text-shadow 属性。
注释：Internet Explorer 9 以及更早版本的浏览器不支持 text-shadow 属性。(IE最新的版本IE11)
/*text-shadow: 水平偏移量(正右负左) 垂直偏移量(正下负上) 阴影模糊半径 阴影颜色;*/
/*基本使用*/
text-shadow: -10px -10px 1px orange;
/*类似发光字*/
text-shadow: 0 0 5px red;
/*多重阴影*/
text-shadow: 0 0 10px red,0 0 30px green,0 0 50px orange;
/*取消阴影*/
text-shadow: none;
background-image ：设置元素的背景图像。
CSS3支持多重背景图,只要加上一个url指定图片路径,并用逗号(,)将两组url分隔就可以了
background-image:url(a.jpg),url(b.jpg);
background-size: 设置背景尺寸
background-size是CSS3新增的属性,以前的背景图无法重设大小,这个新属性能够让我们设置背景图的尺寸。
语法:
background-size: length|percentage|cover|contain;
background:60px 80px
cover:把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
contain 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。
box-shadow
box-shadow语法是为图像制造影子，CSS3的box-shadow有点儿类似于text-shadow, 只不过box-shadow是给对象实现图层阴影效果。
语法： box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow 必需。水平阴影的位置。允许负值。
v-shadow 必需。垂直阴影的位置。允许负值。
blur 可选。模糊距离。
spread 可选。阴影的尺寸。
color 可选。阴影的颜色。
inset 可选。将外部阴影 (outset) 改为内部阴影, 默认值: outset。
实例：
-moz-box-shadow: 10px 10px 15px 2px #666;
-webkit-box-shadow: 10px 10px 15px 2px #666;
-ms-box-shadow: 10px 10px 15px 2px #666;
-o-box-shadow: 10px 10px 15px 2px #666;
box-shadow: 10px 10px 15px 2px #666;
目前大部分浏览器新版的主流浏览器已支持box-shadow语法，但由于CSS3还在规划中、尚未定案，所以有些浏览器会使用自己的语法，
Firefox使用-moz-box-shadow, safari与chrome则使用-webkit-boxshadow。
IE9 、Firefox 4、Chrome、Opera 以及 Safari 5.1.1 支持 box-shadow 属性。
/*box-shadow: 水平偏移量 垂直偏移量 阴影模糊半径 阴影拓展半径 颜色 投影方式(inset);*/
box-shadow: -10px 50px 1px 10px green;
box-shadow: -10px 50px 1px 10px green,5px -20px 5px 0px blue;
border-radius
border-radius就是给图像制造圆角。CSS2.0要做圆角，必须把图像切成小块，再用div将这些小块图像接回。
实例：
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
-ms-border-radius: 30px;
-o-border-radius: 30px;
border-radius: 30px;
IE9 、Firefox 4 、Chrome、Safari 5 以及 Opera 支持 border-radius 属性。(IE9已支持)
border-radius:50% 圆形
/*左上角开始顺时针旋转： 水平弯曲程度/垂直弯曲程度*/
border-radius: 100px 20px 30px 40px/50px 60px 70px 80px;
border-radius: 10px 30px 50px 70px;/*上右下左*/
border-radius: 50px/100px;/*水平都是50px 垂直都是100px*/
border-radius: 50px;
border-image花样边框
border-image可以做出页面花边的效果,语法如下
border-image:source slice width repeat;
source:指定图片路径(必填)
slice: 切出图片使用的边框线(必填)
width: 图片的宽度(可省略)
repeat: 图片填充方式(可省略),设置值有stretch、repeat和round
stretch: 把图片拉伸到整个边框区域
repeat：重复填充
round：重复填充并自动调整图片大小
border-image是CSS3的新增功能,目前IE和Firefox不支持,不推荐使用
border-collapse
为表格设置合并边框模型：
table,td{
border-collapse:collapse; //边框重叠
}
separate 默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。
collapse 如果可能, 边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。
inherit 规定应该从父元素继承 border-collapse 属性的值。
opacity
设置 div 元素的不透明级别：
div{
opacity:0.5; /* 取值范围0-1 */
}
div{
opacity:0.5;
filter:Alpha(opacity=10); //IE8早期版本 取值范围1-100
}
text-overflow 属性规定当文本溢出包含元素时发生的事情。
clip 修剪文本。
ellipsis 显示省略符号来代表被修剪的文本。
string 使用给定的字符串来代表被修剪的文本。
div.test{
text-overflow:ellipsis;
}
实例: 在标题栏中如何实现, 当标题文本超长时，就会自动截断：
这三条语句组合使用, 就可以对单行超长文本做截断, 并且在截断的地方自动补充省略号。
div.test{
overflow: hidden;
white-space: nowrap; /* 不换行 */
text-overflow: ellipsis;" /* 显示省略符号来代表被修剪的文本。 */
}
