css3整理

W3C的CSS3规范仍在开发，但是，许多新的CSS3属性已在现代浏览器使用

CSS3边框

border-radius
    border-top-left-radius: 2em 0.5em
box-shadow:x-shadow y-shadow blur spread(阴影尺寸，可选) color inset(outset外部阴影，可选)
border-image
    border-image-source:设置或检索对象的边框是否用图像定义样式或图像来源路径
    border-image-slice:设置或检索对象的边框背景图的分割方式
    border-image-width:设置或检索对象的边框厚度
    border-image-outset:设置或检索对象的边框背景图的扩展
    border-image-repeat:stretch/repeat/round;设置或检索对象的边框图像的平铺方式

CSS3背景

background-image背景图片
background-color;背景颜色
background-repeat:背景重复
background-position:背景定位
background-attachment:scroll/fixed;背景固定
background-size:x y/100% 100%/cover(比例放大)/contain(包含，图片不溢出)
background-origin:border-box/padding-box/content-box;背景区域定位
background-clip:border-box/padding-box/content-box/no-clip;背景绘制区域

CSS3渐变

linear-gradient:left/top/right/bottom/left top.../0-360deg(起点/角度)，颜色，位置red 50% blue 100%
radial-gradient:(起点(圆心位置)，形状/半径/大小，颜色1，颜色2);径向渐变
    起点:left/top/right/bottom
    形状:ellipsis/circle
    大小:数值或百分比
repeating-linear-gradient线性渐变重复平铺
    IE低版本渐变（滤镜）：
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#000000',GradientType='1');
repeating-radial-gradient

CSS3字体

@font-face

CSS3 2D转换

transform:translate(),rotate(),scale(),skew(),matrix()

CSS3 3D转换

rotateX()
rotateY()
rotateZ()
translateZ()
scaleZ()

CSS3过渡

transition:property duration timing-function delay;
    transition-property:none/all/property
    transition-duration:time;
    transition-timing-function:linear/ease/ease-in-out/ease-in/ease-out/cubic-bezier;

CSS3动画

@keyframes,
animation(
animation-name,animation-duration,animation-timing-function,animation-delay,animation-direction,animation-play-state,animation-iteration-count
)

CSS3多列

column-count
column-gap
column-rule-style
column-rule-width
column-rule-color
column-rule
column-span
column-width

CSS3用户界面

resize
box--sizing
outline-offset

CSS3框大小

box-sizing:border-box;(content-box)

CSS3弹性盒子

display:box或者display:inline-box;设置给父元素
box-orient:horizontal/vertical;定义盒模型的布局方向，设置给父元素
box-direction:normal/reverse;元素排列顺序，设置给父元素
box-ordinal-group:number;子元素的显示次序，设置给子元素
display:flex;弹性盒子布局
[flex布局教程：语法篇][1]
[flex布局教程：实力篇][2]

CSS3多媒体查询

@media screen and (min-width: 480px)

CSS3文本属性

color:rgba();
text-overflow:是否使用一个省略标记(...)标示对象内文本的溢出
    text-overflow:clip;//默认值，无省略号
    text-overflow:ellipsis//当文本溢出时显示省略标记(...)
    PS:该属性需配合overflow:hidden(超出处理)属性和white-space:nowrap(禁止换行)配合使用，否则无法看到效果
text-align:文本的对齐方式
    text-align:left/right/center/justify(两端对齐);//CSS1
    text-align:start(开始边界对齐)/end(结束边界对齐);//CSS3
text-transform:文字的大小写
    text-transform:none/capitalize(每个单词的第一个单词转换成大写)/uppercase/lowercase;//CSS1
    text-transform:full-width(将左右字符设为全角形式。不支持)/full-size-kana(将所有小假名字符转换成普通假名。不支持)
text-decoration:文本的装饰线
    复合属性只有火狐支持
    text-decoration:text-decoration-line text-decoration-style text-decoration-color blink;
    实例 text-decoration:#f00 double overline;
text-shadow:文本阴影
    text-shadow:x y blur color;
text-fill-color:文字填充颜色
text-stroke:设置文字的描边，复合属性
    text-stroke-width:文字的描边厚度
    text-stroke-color:文字的描边颜色
tab-size:制表符的长度
    默认值为8;
word-wrap:当前行超过指定容器的边界时是否断开转行
    word-wrap:normal/break-word(允许长单词换行到下一行)
word-break:规定自动换行的处理方法
    word-break:normal/break-all(允许在单词内部换行)/keep-all(只能在半角空格或连字符处换行)

CSS伪类选择器

UI伪类选择器
    :enabled选择启用状态的元素
    :disabled选择禁用状态的元素
    :checked选择被选中的input元素（单选按钮或复选框）
    :default选择默认元素
    :valid/invalid根据输入验证选择有效或无效的input元素
    :in-range/out-of-range选择指定范围之内或者之外受限的元素
    :required/optional根据是否允许:required属性选择input元素
动态伪类选择器
    :link选择链接元素
    :visited选择用户已访问的元素
    :hover鼠标悬停其上的元素
    :active鼠标点击时触发的事件
    :focus当前获取焦点的元素
其他伪类选择器
    :not(<选择器>)对括号内选择器的选择取反
    :lang(<目标语言>)基于lang全局属性的元素
    :target url片段标示符指向的元素
    :empty选择内容为空的元素
    :selection鼠标光标选择元素内容