/*************************2015/5/25*************************/

圆角效果:

border-radius 使用 X / Y 设置 x轴与y轴半径

border-radius : 20% 30% 80% 10% / 10% 50% 10% 11%

阴影:

box-shadow : 设置 inset 为 内阴影，不设置为外阴影 以逗号隔开，添加多道阴影

box-shadow:5px 2px blue, 2px 2px yellow inset;

边框图片:

border-image :url( image.jpg ) 70 repeat

颜色:

rgba( R, G, B, A )

水平渐变:

linear-gradient(to left, red, blue);

文字溢出时显示省略号 ：

text-overflow : ellipsis;

overflow : hidden;

white-space : nowrap;

嵌入文字 @font-face {

font-family : 字体名称；

src : 地址；

}

文本阴影 :

text-shadow : x-offset y-offset blur color;

设置元素背景图片的原始起始位置 ：

background-orgin : border-box | padding-box | content-box; 需要背景为no-repeat

对背景图片裁剪：

background-clip : border-box | padding-box | content-box | no-clip

背景图片大小：

background-size : auto | <长度值> | <百分比> | cover覆盖 | contain容纳

使用线性渐变 为元素添加分割线 ：

background : linear-gradient(to bottom, black, black) no-repeat right / 1px 15px ;

属性选择器：E[att^/$/*="val"]{}

结构性伪类选择器：

:root // 根选择器 :root{}

:not // 否定选择器 div:not([id="node"]){}

:empty // 空选择器 p:empty{}

:target // 目标选择器

<a href="#brand">brand</a>

<p id="brand">brand page</p>

#brand:target{

// something;

}

:first-child

:last-child

:nth-child(n) // n从1开始，可以接受表达式 p:nth-child(2n){},当表达式中n取0使表达式>=0时，n可以取0，

即2n+1 与 2n-1等效

:nth-last-child(n)

:first-of-type // 某类型的第一个子元素

:nth-of-type(n)

:last-of-type

:nth-last-of-type(n)

:only-child // 父元素中仅有一个子元素才会被匹配

:only-of-type // 父元素中仅有一个这种类型的子元素才会被匹配

/**********************2015/5/26***********************************/

:enabled // 表单元素

:disabled

:checked

::selection // 匹配突出显示的文本 FF需要添加前缀::-moz-selection

:read-only // 指定处于只读状态的样式 FF需要添加前缀::-moz-read-only

:read-write // 指定非只读状态的样式 FF需要添加前缀::-moz-read-only

::before,::after // 为元素的前面、后面插入内容，常和"content"配合使用

使用两个投影，使投影效果加强

transparent // 断点，透明

display:flex ????

变形：

transform：

rotate( deg) // 旋转，相对原点，正值顺时针，负值逆时针

skew(x, y) skewX(x) shewY(y) // 扭曲，使元素按角度倾斜显示，会改变元素形状

scaleI(x, y) scaleX(x) scaleY(y) // 缩放，按倍率缩放

translate(x, y) translateX(x) translateY(y) // 位移，不影响其他组件

matrix(a,b,c,d,e,f) // 矩阵，对元素重新定位

transform-origin: //原点，默认是元素X轴Y轴50%处，传入关键词（top/bottom/left/right）或者百分比

transition-property // 指定过渡动画的CSS属性名称，可以设置all

transition-duration // 从旧状态到新状态的持续时间

transition-timing-function // 过渡函数

ease:由快到慢 linear:恒速 ease-in:渐显 ease-out:渐隐 ease-in-out:渐显渐隐

transition-delay // 过渡延迟时间

transition:property duration timing-function delay;

keyframes // 关键帧

@keyframes aniName{

0%{}

10%{}

100%{}

}

animation:aniName duration timing-function delay;

animation-name: none | IDENT

animation-duration

animation-timing-function

animation-delay

/*****************************2015/5/28*****************************/

animation-itration-count : infinite || <number> // 动画播放次数

animation-direction : normal || alertnate（奇数次正常播放，偶数次反向播放） // 动画播放方向

animation-play-state : running || paused // 设置动画的播放状态，

暂停恢复后，从暂停的位置开始，但样式会恢复为原始状态

animation-fill-mode // 定义动画开始之前和结束之后的操作

none : 默认值，表示动画将按预期进行和结束，在动画完成其最后一帧时，动画会反转到初始帧处

forwads : 表示动画在结束后继续应用最后的关键帧的位置

backwards : 会在向元素应用动画样式时迅速应用动画的初始帧

both : 元素动画同时具有forwards和backwards效果

布局样式：

columns : width || count; // 多列布局

column-width

coumn-count

column-gap // 列间距，使用单位px或em

column-rule // 列表边框

column-rule-width // 可以使用关键词：medium、thck和thin

column-rule-style // none、hidden、dotted、dashed、solid、double、groove、ridge、inset、outset

column-rule-color // 默认为前景色color的值，可以将其设置为transparent（透明）

column-span : none || all ; // 跨列设置（FF貌似不支持）

盒模型：http://www.imooc.com/code/1363

box-sizing : content-box | border-box // 修改width包括的内容，只包括content，还是border + padding + content