CSS3注意点

1、background-Origin属性指定了背景图像的位置区域。content-box, padding-box,和 border-box区域内可以放置背景图像。注意：背景色是不起作用的

2、background-clip背景剪裁属性是从指定位置开始绘制。也有三个值content-box, padding-box,和 border-box

3、css3渐变，渐变也支持透明度（transparent），可用于创建减弱变淡的效果。

　  repeating-linear-gradient() 函数用于重复线性渐变，需要设置高度，和每个循环颜色的占高比例

#grad1 {
　　height: 800px;

　　background: repeating-linear-gradient(red, yellow 10%, green 20%);

}

4、字体定义

@font-face{
    font-family: myFirstFont;  //规定字体的名称
    src: url('Sansation_Light.ttf')  //定义字体文件的 URL。
        ,url('Sansation_Light.eot'); /* IE9 */
}
div{
    font-family:myFirstFont;
}

相当于是定义了一个字体变量，在稍后的css样式中引用此字体变量

5、2D和3D转换

transform（转换）是用于元素的转换属性，向元素应用 2D 或 3D 转换。属性值是一个函数，有：

• translate()  移动
• rotate()  旋转
• scale()  缩放
• skew()  倾斜
• matrix()  混合转换

6、css3过渡动画，某种效果可以从一种样式转变到另一个的时候，无需使用Flash动画或JavaScript。使用元素属性transition（过渡）

有三点

• 指定要添加效果的CSS属性
• 指定效果的持续时间。
• 最终触发时的状态

div{
    width:100px;
    height:100px;
    background:red;
    transition:width 2s;
    -webkit-transition:width 2s; /* Safari */
}
​
div:hover{
    width:300px;
}

要添加多个样式的变换效果，添加的属性由逗号分隔：

div
{
    transition: width 2s, height 2s, transform 2s;
    -webkit-transition: width 2s, height 2s, -webkit-transform 2s;
}

注意：转换transform属性也可以用于过渡动画

7、@keyframes关键帧动画

实质就是使用@keyframes规则创建一个自定义的动画，然后使用css属性animation执行这自定义的动画名称

div
{
    width:100px;
    height:100px;
    background:red;
    animation:myfirst 5s;   //此处是使用自定义的动画
    -webkit-animation:myfirst 5s; /* Safari and Chrome */
}

//以下是自定义动画名称
@keyframes myfirst
{
    from {background:red;}
    to {background:yellow;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
    from {background:red;}
    to {background:yellow;}
}

动画是使元素从一种样式逐渐变化为另一种样式的效果。

您可以改变任意多的样式任意多的次数。

请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。

0% 是动画的开始，100% 是动画的完成。

为了得到最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。

注意一个属性animation-fill-mode，规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。即可以使动画停留在最后的状态

8、弹性盒子

弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。

弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。

弹性容器内包含了一个或多个弹性子元素。

注意： 弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。

弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。

利用弹性盒子水平垂直居中，flex弹性盒子的子元素水平和垂直方向都有流动性

.flex-container {
    display: -webkit-flex;
    display: flex;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

.flex-item {
    background-color: cornflowerblue;
    width: 75px;
    height: 75px;
    margin: auto;
}

9、多媒体查询

可以在css文件内使用，也可以在html内使用link标签引入不同的css文件

@media screen and (min- 480px) {
    body {
        background-color: lightgreen;
    }
}

<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css">