css3 选择器 字体

1.什么是css3？
    css是对html外观渲染的一种语言，css3是css第三次修改版。
2.为什么学习css3？
    --减少开发成本与维护成本
        CSS3提供的动画特性，可让开发者在先实现一些动态按钮或者动态导航时远离JavaScript，
        让开发人员不需要花费大量的时间去写脚本或者寻找合适的脚本插件来适配一些动态网站效果。
    --提高页面性能
        而使用CSS3制作图形化网站无需任何图片，极大地减少了HTTP的请求数量，
        并且提升了页面的加载速度。
3.css3兼容问题？    
    Chrome （谷歌浏览器）：-webkit-
　　Safari （苹果浏览器）：-webkit-
　　Firefox（火狐浏览器）：-moz-
　　lE（IE浏览器）：-ms-
　　Opera （欧朋浏览器）：-o- 
    **移动端只需要做-webkit-兼容就好
4.css3的学习内容？
    选择器
    盒子模型
    背景和边框
    文本效果
    2D/3D 转换
    动画
    多列布局
    媒体查询
5.新增选择器：
    选择器                    例子                        描述
    element>element           div>p                    选择父元素为 <div> 元素的所有 <p> 元素。
    element+element            div+p                    选择紧接在 <div> 元素之后的所有 <p> 元素。
    属性选择器：
    [attribute]                [target]                选择带有 target 属性所有元素。
    [attribute=value]        a[target=_back]            选择 target="_blank" 的所有元素。
    [attribute^=value]        a[class^="test"]        选择其 a属性值以 "test" 开头的每个 <a> 元素。
    [attribute$=value]        a[class$="text"]        选择其 a属性以 "text" 结尾的所有 <a> 元素。
    [attribute*=value]        a[src*="abc"]            选择其 src 属性中包含 "abc" 子串的每个 <a> 元素。
    结构：
   :first-letter            p:first-letter            选择每个 <p> 元素的首字母。
    :first-line                p:first-line            选择每个 <p> 元素的首行。
    :first-child            p:first-child            选择属于父元素的第一个子元素的每个 <p> 元素。
    :first-of-type            p:first-of-type            选择属于其父元素的首个 <p> 元素的每个 <p> 元素。
    :last-of-type            p:last-of-type            选择属于其父元素的最后 <p> 元素的每个 <p> 元素。
    :only-of-type            p:only-of-type            选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。
    :only-child                p:only-child            选择属于其父元素的唯一子元素的每个 <p> 元素。
                                                    父元素有且只有一个子元素
    :nth-child(n)            p:nth-child(2)            选择属于其父元素的第二个子元素的每个 <p> 元素。
                            odd 奇数行
                            even 偶数行
                            n+5==是后5个选中  
                            -n+5==前五个选中
                            2n 偶数行
                            2n+1 奇数行
    :nth-last-child(n)        p:nth-last-child(2)        同上，从最后一个子元素开始计数。
    :nth-of-type(n)            p:nth-of-type(2)        选择属于其父元素第二个 <p> 元素的每个 <p> 元素。
    :nth-last-of-type(n)    p:nth-last-of-type(2)    同上，但是从最后一个子元素开始计数。
    :last-child                p:last-child            选择属于其父元素最后一个子元素每个 <p> 元素。
    选择器中  带有of-type写法和没有of-type写法的选择器的区别：
            带有of-type写法的选择器，具有针对性
            没有of-type写法的选择器，不具有针对性
    :before                    p:before                在每个 <p> 元素的内容之前插入内容。
    :after                    p:after                    在每个 <p> 元素的内容之后插入内容。
6.盒子模型
    原来的盒子，添加border,padding都可以让盒子本身变大，为了解决这个问题，css3推出了新的盒子模型
    --box-sizing:content-box,border-box
        content-box：标准盒子模型 是默认值 计算方式 padding+border+width
        border-box：怪异盒子模型  盒子大小始终是元素width
    --盒子阴影（边框阴影）：
        盒子阴影                              
            box-shadow: h-shadow v-shadow blur spread color inset; 
            box-shadow: x轴   y轴   模糊度（可选） 阴影尺寸 阴影颜色  内阴影(可选);
            box-shadow: 1px 3px 1px 50px #ccc inset;
            box-shadow: 20px 20px 20px yellow,30px 30px 30px green;
             /* 盒子阴影叠加 */
            box-shadow: 3px 3px 3px yellow,7px 7px 7px blue,15px 15px 10px green;
7.文字阴影
    text-shadow：x y blur color, …
    参数
    x        横向偏移
    y        纵向偏移
    blur        模糊距离
    color        阴影颜色
    文本阴影如果加很多层，会很卡很卡很卡
    例子：
    层叠：color:red; font-size:100px; font-weight:bold; text-shadow:2px 2px 0px white, 4px 4px 0px red;
    光晕：color:white; font-size:100px; text-shadow:0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;
    火焰文字：text-shadow: 0 0 20px #fefcc9, 10px -10px 30px #feec85, -20px -20px 40px #ffae34, 20px -40px 50px #ec760c, -20px -60px 60px #cd4606, 0 -80px 70px #973716, 10px -90px 80px #451b0e; font-family:Verdana, Geneva, sans-serif; font-size:100px; font-weight:bold; color:white;
8.文字描边
    webkit-text-stroke:宽度 颜色   
9.文字排列 
    direction  定义文字排列方式(全兼容)  
    rtl 从右向左排列
    ltr 从左向右排列
    注意要配合unicode-bidi:bidi-override; 一块使用 
10.    自定义字体类型
    @font-face {
        font-family:'二哈';
        src: url(fonts/Fontin_Sans_R_45b.otf);
    }
11.背景渐变：
    分为2种：
        线性渐变   linear 
        径向渐变    radial  
        background:-webkit-linear-gradient (top,yellow,blue);
        background:-webkit-linear-gradient(left,yellow,blue,green,pink);
        background:-webkit-linear-gradient(top right,yellow,blue,green,pink);
        background:-webkit-linear-gradient(top right,yellow 50%,blue 20%,green 30%,pink);
        background:-webkit-linear-gradient(top,yellow 200px,blue 100px,);
        background: -webkit-gradient(linear,0 0, 0 100%, from(yellow), to(red));  
        background: -webkit-radial-gradient(50%,yellow, red,blue,pink,green);