css3

1.边框
border-radius：50px;圆角边框,值越大越圆
box-shadow:10px(右边) 10px(下边) 5px(模糊程度) red; 阴影

2.背景
background-size:10px 10px; 设置背景图片的尺寸,也可以用%，10% 10%；

3.文本效果
text-shadow:5px(右) 5px(下) 5px(模糊度) red;文字阴影
word-wrap:break-word;强制换行。
4.2D转换
transform 转换 Internet Explorer 10、Firefox 以及 Opera 支持 transform 属性。Chrome 和 Safari 需要前缀 -webkit-。

transform:translate(50px,100px); 转变为，调动。把元素从左侧移动 50 像素，从顶端移动 100 像素

transform:rotate(30deg); 旋转。水平方面的，元素顺时针旋转 30 度。
transform: scale(2,4); 比例。宽度转换为原始尺寸的 2 倍，把高度转换为原始高度的 4 倍。

transform: skew(30deg,20deg); 歪斜的，绕 X 轴把元素翻转 30 度，围绕 Y 轴翻转 20 度。

5.过渡 CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。如进度条。
transition Internet Explorer 10、Firefox、Chrome 以及 Opera 支持 transition 属性。afari 需要前缀 -webkit-。
注释：Internet Explorer 9 以及更早的版本，不支持 transition 属性。
注释：Chrome 25 以及更早的版本，需要前缀 -webkit-。
要实现这一点，必须规定两项内容：
规定您希望把效果添加到哪个 CSS 属性上
规定效果的时长
div
{
width:100px;
height:100px;
background:yellow;
transition:width 2s;
-moz-transition:width 2s; /* Firefox 4 */
-webkit-transition:width 2s; /* Safari and Chrome */
-o-transition:width 2s; /* Opera */
}
div:hover
{
width:300px;
}
transition 简写属性，用于在一个属性中设置四个过渡属性。 3
transition-property 规定应用过渡的 CSS 属性的名称。
transition-duration 定义过渡效果花费的时间。默认是 0。
transition-timing-function 规定过渡效果的时间曲线。默认是 "ease"。linear
匀速。
transition-delay 规定过渡效果何时开始。默认是 0。
div
{
width:100px;
height:100px;
background:yellow;
transition-property:width;
transition-duration:1s;
transition-timing-function:linear;
transition-delay:2s;
/* Firefox 4 */
-moz-transition-property:width;
-moz-transition-duration:1s;
-moz-transition-timing-function:linear;
-moz-transition-delay:2s;
/* Safari and Chrome */
-webkit-transition-property:width;
-webkit-transition-duration:1s;
-webkit-transition-timing-function:linear;
-webkit-transition-delay:2s;
/* Opera */
-o-transition-property:width;
-o-transition-duration:1s;
-o-transition-timing-function:linear;
-o-transition-delay:2s;
}

div:hover
{
width:200px;
}

5.定义动画 keyframes 关于幁
当您在 @keyframes 中创建动画时，请把它捆绑到某个选择器，否则不会产生动画效果。
通过规定至少以下两项 CSS3 动画属性，即可将动画绑定到选择器：
规定动画的名称
规定动画的时长
div
{
width:100px;
height:100px;
background:red;
animation:myfirst 5s;
-moz-animation:myfirst 5s; /* Firefox */
-webkit-animation:myfirst 5s; /* Safari and Chrome */
-o-animation:myfirst 5s; /* Opera */
}

@keyframes myfirst
{
from {background:red;}
to {background:yellow;}
}

animation-name 用来定义一个动画的名称
animation-duration
animation-directory：指定动画播放的方向，alternate，他的作用是是，动画播放在低偶数次向前播放，第奇数次反方向
播放。
animation-delay：用来指定元素动画开始的时间
animation-iteration-count：()

3.3D
perspective 的中文意思是：透视，视角。
perspective 属性的存在与否决定了你所看到的是2次元的还是3次元的，也就是是2D，transform还是3D transform. 这不难理解，没有透视，不成3D.
4.border-style dotted点线 solid double双线 dashed虚线