1 边框
1 border-radius:圆角 ie9+ chrome firefox opera
2 box-shadow :边框阴影 ie9+ chrome firefox opera
3 border-image : 边框图片 chrome firefox
1 border-radius:5px;(圆角半径)
-webkit-border-radius:5px;//chrome safari
-ms-border-radius:5px;//ie
-o-border-radius:5px;//opera
-mos-border-radius;5px;//老版firefox
2 border-shadow:5px 5px 5px #fff;(x阴影长度，y阴影长度，模糊度，颜色)
3 border-image:url(border.png) 30 30 round;默认都是stretch拉伸的
举例子说基本的特性
w3cschool上的例子
仔细看使用的图片和没有stretch（使用round）的效果图，你会发现4个角上（中间也不会被拉伸）的红色的四方形没有被拉伸，而中间的就会被重复覆盖
其他参数可以参考 http://msdn.microsoft.com/zh-cn/library/windows/apps/dn308261.aspx
2 背景
1 background-size :背景大小 ie9+ firefox chrome safari
2 backgroind-origin :背景定位区域 （border-box/padding-box/content-box）ie9+ firefox chrome safari
3 background-clip :规定背景绘制的区域（和background-origin不同的是它不是应用在图片背景上，而是底色）ie9+ firefox chrome safari
1 background-size:width height;
div
{
background:url(bg_flower.gif);
-moz-background-size:63px 100px; /* 老版本的 Firefox */
background-size:63px 100px;
background-repeat:no-repeat;
}
2 background-origin:border-box|padding-box|content-box
(图来自W3C)
3 background-clip:border-box|padding-box|content-box;
div
{
background-color:yellow;
background-clip:content-box;
}
3 文本效果
1 text-shadow :文本阴影 主流浏览器都主持
2 word-wrap 主流浏览器都主持
3 word-break 在恰当的断子点进行换行
1 text-shadow:x y 模糊度 颜色；
2 word-wrap:break-word|normal;允许对长的单词进行换行|正常不换行
3 word-break:normal|break-all|keep-all;浏览器默认|允许单词内换行|只能在半角空格或字符处换行
4 字体
5 2D转换
tranform ie10+ firefox chrome(-webkit-) opera(-webkit-) ie9(-ms-)
1 translate(x,y); translate(50px,100px);元素向left移动50px,再增加top 100px;
举个例子说明，需要注意的事项是，在元素使用translate时，并不需要指定position:absolute;
看一个三个div并排的例子
<!DOCTYPE html> <html> <head> <style> div { width:100px; height:75px; background-color:yellow; border:1px solid black; float:left; } div#div2 { transform:translate(50px,0px); -ms-transform:translate(50px,0px); /* IE 9 */ -moz-transform:translate(50px,0px); /* Firefox */ -webkit-transform:translate(50px,0px); /* Safari and Chrome */ -o-transform:translate(50px,0px); /* Opera */ } </style> </head> <body> <div>你好。这是一个 div 元素。</div> <div id="div2">你好。这是一个 div 元素。</div> <div></div> </body> </html>
可见使用transform：translate(x,y);的dom并不会影响布局.
2 rotate(xxdeg);元素顺时针旋转给定的角度。负值时，逆时针转动。旋转的中心点为元素的中心
3 scale(x,y);放大或减少的倍数.同样值得注意的是scale方法，也是以元素的中心的放大缩小点，同样不需要声明为绝对占位。check the code
<!DOCTYPE html> <html> <head> <style> div { width:100px; height:75px; background-color:yellow; border:1px solid black;float:left; } div#div2 { transform:scale(2,4); -ms-transform:scale(2,4); /* IE 9 */ -moz-transform:scale(2,4); /* Firefox */ -webkit-transform:scale(2,4); /* Safari and Chrome */ -o-transform:scale(2,4); /* Opera */ } </style> </head> <body> <div>你好。这是一个 div 元素。</div> <div id="div2">你好。这是一个 div 元素。</div> </body> </html>
4 skew(xdeg,ydeg);以元素的中心为旋转点，向着x轴转动x度，沿着Y轴转动
-webkit-transform:skew(30deg,0deg); /* Safari and Chrome */
-webkit-transform:skew(0deg,30deg); /* Safari and Chrome */
的区别在：
ps:补充一个旋转中心的属性transform-origin:20% 40%;
6 3D转换
rotateX(xdeg), rotateY(ydeg),rotate(zdeg);围绕X,Y,Z进行旋转
transform-style:使其子元素定义是否具有3D位置flat|preserve-3d;不保留|保留
perspective:规定3D元素的透视效果（元素被查看的位置视图）
perspective-origin:规定3D元素底部的位置
backface-visibility:定义元素在不面对屏幕时是否可见
translateX translateY translateZ移动
scaleX scaleY scaleZ扩大
举个例子（可以做一个图片轮换的功能）
代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <style> .child { width:100px; height:75px; background-color:yellow; border:1px solid black; position:absolute; top:0px;left:0px; } div#div1 { -webkit-transform:translateX(-90px) translateZ(-120px) rotateY(45deg); } div#div2 { -webkit-transform:translateX(0px) translateZ(0px) rotateY(0deg); } div#div3 { -webkit-transform:translateX(90px) translateZ(-120px) rotateY(-45deg); } #wrap{-webkit-transform-style:preserve-3d;-webkit-perspective:1000px;width:100px;height:75px;margin-left:200px;position:relative;} </style> </head> <body> <div id="wrap"> <div id="div1" class="child">你好。这是一个 div 元素。</div> <div id="div2" class="child">你好。这是一个 div 元素。</div> <div id="div3" class="child">你好。这是一个 div 元素。</div></div> <p><b>注释：</b> Internet Explorer 和 Opera 不支持 rotateX 方法。</p> </body> </html>
7 过渡
transition： ie10+ chromefirefox opera safafi
transition-property 属性
transition-duration 过渡需要的时间
transition-timing-function:规定速度效果的速度曲线
linear:相同的速度，从开始到结束
ease :慢速开始，然后变快，然后慢速
ease-in :慢速开始
ease-out:慢速结束
ease-in-out:慢速开始和结束的过渡效果
transition-delay:定义过渡效果何时开始
过渡是元素从一种样式逐渐改变成另一种效果
简单的过渡。
效果图
代码：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> div{width:100px; height:100px; background:yellow;margin-right:10px;float:left; transition:width 2s; -webkit-transition:width 2s; -ms-transition:width 2s; -moz-transition:width 2s; } div:hover{width:200px;} </style> </head> <body> <div class=""></div> <div class=""></div> </body> </html>
如果没有附加transition效果，元素会直接变化为200px，没有过渡的效果出现
在修改下，加强认识：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> div{width:100px; height:100px; background:yellow;margin-right:10px;float:left; transition:width 2s, transform 2s; -webkit-transition:width 2s,-webkit-transform 2s; -ms-transition:width 2s; -moz-transition:width 2s; } div:hover{width:200px; transform:rotate(180deg); -webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-o-transform:rotate(180deg); } </style> </head> <body> <div class=""></div> <div class=""></div> </body> </html>
8 动画
@keyframes ie10+ chrome firefox opera safari
animation ie10+ chrome firefox opera safari
@keyframes 规定动画
animation 简写动画属性
animation-name 动画名称
animation-duration 动画完成的时间
animation-timing-function 速度曲线 linear|ease|ease-in|ease-out|ease-in-out|
animation-delay 延迟执行时间
animation-iteration-count 播放次数
animation-direction 是否在下个周期你想播放，默认为normal | alternate
animation-play-state 规定动画是否正在运行或暂停，默认running|paused
animation-fill-mode 规定对象动画时间之外的状态
1 例子
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> div{width:100px; height:100px; background:yellow;margin-right:10px;float:left; animation:myfirst 5s;-webkit-animation:myfirst 5s; } @keyframes myfirst{ from {backgrond:red;} to{ background:black;} } @-webkit-keyframes myfirst{ from {backgrond:red;} to{ background:black;} } @-moz-keyframes myfirst{ from {backgrond:red;} to{ background:black;} } </style> </head> <body> <div class=""></div> <div class=""></div> </body>
2 例子
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> div{width:100px; height:100px; background:yellow;margin-right:10px;float:left; animation:myfirst 5s;-webkit-animation:myfirst 5s; } @keyframes myfirst{ 0% {backgrond:red;} 25%{ background:black;} 50%{ background:blue;} 100%{ background:yellow;} } @-webkit-keyframes myfirst{ 0% {backgrond:red;} 25%{ background:black;} 50%{ background:blue;} 100%{ background:yellow;} } @-moz-keyframes myfirst{ 0% {backgrond:red;} 25%{ background:black;} 50%{ background:blue;} 100%{ background:yellow;} } </style> </head> <body> <div class=""></div> <div class=""></div> </body> </html>
组合animation和transform的效果
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> #ani{width:100px; height:100px; background:yellow; animation:ani 5s 1; position:relative;-webkit-animation:ani 5s 1; } @keyframes ani{ 0%{ transform:rotate(0deg); left:0px;} 25%{ transform:rotate(20deg);left:0px;} 100%{ transform:rotate(0deg);} } @-webkit-keyframes ani{ 0%{ -webkit-transform:rotate(0deg); left:0px;} 25%{ -webkit-transform:rotate(45deg);left:30px;} 75%{ -webkit-transform:rotate(0deg);left:400px} 100%{ -webkit-transform:rotate(-360deg);left:0px;} } </style> </head> <body> <div id="ani"></div> </body> </html>
需要注意的点是：
position:relative;还有@-webkit-keyframes 里面的transform也要写成-webkit-transform