css3

css3有哪些新特性

边框 border-radius border-image box-shadow

渐变

文本效果 text-shadow word-wrap word-break

@font-face

@font-face
{
    font-family: myFirstFont;
    src: url(sansation_light.woff);
}

div
{
    font-family:myFirstFont;
}

transition 过渡

• transition是实现变化过渡的
• 属性 transition-property:要过渡的css属性 transition-durition:过渡要花费的时间
  transition-timing-function:指定速度效果的效果曲线
  transition-delay:定义过渡效果何时开始
• transition 需要事件触发，所以没法在网页加载的时候自动发生
• transition是一次性的，不能重复发生，除非一再触发
• transition只能定义开始状态和结束状态，不能定义中间状态，也就说只有两个状态
• 一条只能定义一个属性的变化，不能涉及多个属性

动画 animation

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

@-webkit-keyframes myfirst /* Safari 与 Chrome */
{
    from {background: red;}
    to {background: yellow;}
}
div
{
    animation: myfirst 5s;
    -webkit-animation: myfirst 5s; /* Safari 与 Chrome */
}

flex

• flex-direction属性决定主轴的方向，属性值有row | row-reverse | column | column-reverse
• flex-wrap:如果一条轴线排不下 如何换行，属性值wrap,nowrap,wrap-reverse
• justify-content:flex-start:左对齐|flex-end：右对齐|center：居中对齐|space-between:两端对齐，item之间间隔相等 |space-around：每个项目两侧的间隔相等
• align-items：属性定义项目在交叉轴上如何对齐，可取值:flex-start|flex-end|center|stretch |baseline
• align-content:定义了多根轴线的对齐方式，如果项目只有一根轴线，该属性不起作用
• 对于item来说的属性 order flex-shrink(缩小比例) 默认值是1; flex-grow(放大比例)默认值是0 flex属性 是flex-shrink flex-grow flex-basis的统一形式
• flex-basis:分配多余空间之前，项目占据的主轴空间（main size）

box-sizing

• 三个值 content-box border-box inherit

多媒体查询

• width,height 视口宽度和高度
• device-width device-height 设备宽度和高度
• orientation 方向 {orientation:landscape}
• aspect-ration 视口宽高比
• 分辨率： resolution
• color
• color-index
• monochrome
• scan
• grid: 判断设备是网格设备还是位图设备