前端学习(二十二）css3（笔记）

html5
    
    普通：
        header section footer nav article aside figure

特殊：
        canvas video audio(controls控制台)

表单：

type
            time
            color
            range
            number

自动获取焦点：
            autofocus

提示文字：
            placeholder
-----------------------------------------------
css3：

background:-webkit-linear-gradient(top,red,blue,green);

浏览器的前缀：
以前：
background:-webkit-linear-gradient(top,red,blue,green);
background:-ms-linear-gradient(top,red,blue,green);
background:-moz-linear-gradient(top,red,blue,green);
background:-o-linear-gradient(top,red,blue,green);    
现在：
background:-webkit-linear-gradient(top,red,blue,green);
background:linear-gradient(top,red,blue,green);

-webkit-  谷歌
-ms-  IE
-moz-  火狐
-o-  欧朋

-----------------------------------------

圆角：
        border-radius:10px; ---四个方向的圆角都是10px

圆：
            1.正方形
            2.值是：50%；（宽高的一半）

左上角单独写法：
        border-top-left-radius:50px;
        border-top-left-radius:100px 50px;---上边100px弧度  左边50px弧度！

---------------------------------------------

动画：
    第一种动画：
        用法：改变谁提前给它加好这个动画样式！
    transition:1s all; ---过渡动画！
    transition:3s all ease-in-out;

transition:时间 所有样式 运动形式;

好处：
            1.什么样式都可以！
            2.和js配合起来很轻松！
            3.性能很高！

***跳变的动画做不了！（变好几次）
---------------------------------------
    第二种动画：

/*定义动画*/
    @-webkit-keyframes aaa{
        0%{width:100px;height:100px; background:red;}
        50%{width:300px;height:100px; background:yellow; border-radius:50%;}
        100%{width:100px;height:100px; background:red;}

调用：（让谁改变，给谁调用！）
    -webkit-animation:aaa 2s infinite;

-webkit-animation:动画名 时间 运动形式;
    infinite（无限运动）

--------------------------------------------------

背景色：
    1.red blue
    2.#000 #fff
    3.rgb（0,0,0）---css3

background:rgba(0,0,0,0.5);

background:rgba(0,0,0,透明度);

盒子阴影：
    默认外阴影！
    box-shadow:5px 5px 5px 5px #000;
            1.X轴偏移量（正数向右）
            2.Y轴偏移量（正数向下）
            3.模糊度
            4.阴影大小
            5.颜色

内阴影:inset
     box-shadow:inset 5px 5px 5px 5px blue;

--------------------------------------------
文本阴影：
    text-shadow:5px 5px 5px #000;
            1.X轴偏移量（正数向右）
            2.Y轴偏移量（正数向下）
            3.模糊度
            4.颜色
        ***注意：
            1.没有内阴影
            2. text-shadow:5px 5px 5px blue,15px 15px 2px red,30px 30px 2px green;

--------------------------------------------------
背景色渐变：
    
    线性：
        background:linear-gradient(red,blue,green);
        方向：默认从上往下

背景色：linear-gradient(颜色1,颜色2,颜色3)；
        -webkit-linear-gradient(top,red,blue,green);
        -webkit-linear-gradient(开始方向,red,blue,green)
        ------单词表示法：

background:-webkit-linear-gradient(10deg,red,blue,green)---度数表示法：
        60deg--60度；---按照逆时针来走的！

background:linear-gradient(45deg,red 25%,blue 25%,blue 50%,yellow 50%,yellow 75%,green 75%);

径向：

background:radial-gradient(red,blue);
    1.形状1
        background:radial-gradient(100px 100px,red,blue);

background:radial-gradient(x轴半径 y轴半径,red,blue);

2.形状2
        background:radial-gradient(ellipse,red,blue);----会随着div的宽高变椭圆

background:radial-gradient(circle,red,blue);----就是圆

3.位置：圆的中心点的位置！
    全：background:radial-gradient(位置,形状,red,blue);

1.单词表示法
        -webkit-radial-gradient(left top,100px 100px,red,blue)

2.数值（以div的左上角为起点）
         background:-webkit-radial-gradient(0 0,100px 100px,red,blue);

第一个值是left
         第二个是top

背景色：-webkit-
-------------------------------------------------
背景图大小：

1.
 background-size:100% 100%;

背景图大小：宽  高！
2.
 background-size:contain;

宽度100%（宽度和父级宽度一致，高度按照宽度比例变化-为了保持图片不变形）

3.
background-size:cover;
高度100%（高度和父级高度一致，宽度宽度按照高度比例变化-为了保持图片不变形）

--------------------------------------------
蒙版：

-webkit-mask:url(img/666.png) no-repeat center;
    
效果：配合背景图达到效果（对于素材来说：透明的地方不显示，不透明显示）

============================================