CSS
①W3School的学习
一、CSS3动画属性（Animation）
@keyframes 规定动画
animation 所有动画属性的简写属性，处理animation-play-state属性。
animation-name 规定@keyframes动画的名称。
animation-duration 规定动画完成一个周期所花费的秒或毫秒
animation-timing-function 规定动画的速度曲线
animation-delay 规定动画何时开始
animation-iteration-count 规定动画被播放的次数
animation-direction 规定动画是否在下一周期逆向地播放
animation-play-state 规定动画是否正在运行或暂停
animation-fill-mode 规定对象动画时间之外的状态
二、CSS3边框属性
Border-radius 设置所有四个 border-*-radius属性的简写属性
Border-image 设置所有border-image-*属性的简写属性。
Box-shadow 向方框添加一个或多个阴影。
Div（圆角矩形）
{
border：2px solid
Border-radius：25px
-moz-border-radius：25px；
}
Div（向方框添加阴影）
{
Box-shadow：10px 10px 5px #8888888
}
Div（向方框添加阴影）
{
Box-shadow：10px 10px 5px #8888888
}
Div(添加边框图片)
{
border-image：url（border.png）30 30 round;
}
三、CSS3 背景属性
Background-clip 规定背景的绘制区域
Background-origin 规定背景图片的定位区域
Background-size 规定背景图片的尺寸
div(设置背景图片的大小)
{
background：url（bg_flower.gif);
background-size:63px 100px;
background-repeat: no-repeat;
}
div(对背景图片进行拉伸，使其完成填充内容区域)
{
background: url(bg_flower.gif);
background-size: 40% 100%;
background-repeat: no-repeat;
}
Css3 background-origin:contet-box属性规定背景图片的定位区域
div
{
background：url（bg_flower.gif);
Background-repeat: no-repeat;
Background-size:100% 100%;
Background-origin: content-box;
}
Body
{
Background-image: url(bg_flower.gif), url(bg_flower_2.gif);
}
五、CSS3文本效果
hanging-punctuation 规定标点字符是否位于线框之外
punctuation-trim 规定是否对标点字符进行修剪
text-align-last 设置如何对齐最后一行或紧挨着强制换行符之前的行
text-emphasis 湘元素的文本应用重点标记以及重点标记的前景色
text-justify 规定当text-align设置为“justify”时所使用对齐方法
text-outline 规定文本的轮廓
text-overflow 规定当文本溢出包含元素时发生的事情
word-break 规定非中日韩文本的换行规则
text-shadow 向文本应用阴影
水平阴影、垂直阴影、模糊距离、阴影的颜色
h1
{
text-shadow: 5px 5px 5px #FF0000;
}
word-wrap 自动换行
P{
word-wrap：break-word;
}
六、CSS3字体属性
font-stretch
font-stretch
font-style
font-weight
unicode-range
<style>
@font-face
{
font-family:myFirstFont;
src: url('Sansation_Light.ttf),url('Sansation_Light.eot');
}
div
{
font-family:myFirstFont;
}
</style>
七、CSS32D 转换（对元素进行移动、缩放、转动、拉长或拉伸）
tranlagte（）；
元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数。
rotate（）；
元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转
scale（）；
元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数
skew（）；
围绕 X 轴把元素翻转 30 度，围绕 Y 轴翻转 20 度
matrix（）；
方法把所有 2D 转换方法组合在一起。方法需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。
div
{
transform：rotate（30deg）；
}
div
{
transform: translate(50px,100px);
}
div
{
transform: skew(30deg,20deg);
}
div
{
transform：matrix（0.866,0.5，-0.5,0.866,0,0）；
}
八、CSS33D 转换
transform-origin 允许改变被转换元素的位置
transform-style 规定被嵌套元素如何在3D空间中显示
perspective 规定3D元素的透视效果
perspective-origin 规定3D元素的底部位置
backface-visibility 定义元素在不面对屏幕时是否可见
rotateX()方法
元素围绕其X轴以给定的读数进行旋转
rotateY（）方法
元素围绕Y轴已给定的角度进行旋转
div
{
transform： rotatex（120deg）；
}
div
{
transform: rotateY(130deg);
}
九、CSS3过渡（当元素从一种样式变换为另一种样式时为元素添加效果）
transition 简写属性，用于在一个属性中设置四个过滤属性。
transition-property 规定应用过滤的CSS属性的名称。
transition-duration 定义过滤效果花费的时间。默认是0；
transition-timing-function 规定过滤效果的时间曲线。默认是ease。
transition-delay 规定过滤效果何时开始。默认是0；
宽度属性的过滤效果
div
{
transition: width 2s;
}
div;hover
{
width:300px;
}
多项改变
如需向多个样式添加过滤效果，枪添加多个属性，有逗号隔开
向宽度、高度和转换添加过滤效果：
div
{
transition： width2， height 2s， transform 2s；
}
div
{
transition-property： width；
transition-duration： 1s；
transition-timing-function： linear；
transition-delay： 2s；
}
简写属性
div
{
transition： width 1s inear 2s；
}
十、多列
column-count
column-gap
column-rule
column-fill 规定如何填充
column-rule-color 规定列之间规则的颜色
column-rule-style 规定列之间规则的样式
column-rule-width 规定列之间规则的宽度
column-span 规定元素应该横跨的列数
columns 规定设置column-width和column-count的简写属性。
把div元素中的文本分割为三列
div
{
column-count:3;
}
规定列之间40像素的间隔
div
{
column-gap：40px；
}
column-rule属性设置列之间的宽度、样式和颜色规则
div
{
column-rule：3px outset #ff0000；
}
十一、用户界面
新的用户界面特性包括重设元素尺寸、和尺寸以及轮廓等。
resize
box-sizing
outline-offset标准用户界面元素的外观
icon 为创作者提供使用图标等价物来设置元素样式的能力
nav-down 规定使用arrow-down导航键时向何处导航
nav-index 设置元素的tab键控制次序
nav-left 规定在使用arrow-left导航键时向何处导航
nav-right
nav-up
outline-offset 对轮廓进行偏移，并在超出边框边缘的部分绘制轮廓
appearance 将元素设置为
resize属性规定是否可由用户调整元素尺寸
div
{
resize：both；
overflow：auto；
}
box-sizing属性允许您一确切的方式定义时应的某个区域的具体内容
规定两个并排的带边框方框
div
{
box-sizing：border-box；
width：50%；
float：left；
}
outline offset 属性对轮廓警醒偏移，并在超出边框边缘的位置绘制轮廓。
轮廓不占空间 轮廓可能是非矩形
div
{
border：2px solid black；
outline：2px solid red；
outline-offset：15px；
}
