这篇文章上次修改于 2083 天前，可能其部分内容已经发生变化，如有疑问可询问作者。

css2和css3的区别：

1、css3能使代码更加简洁、页面结构更加清晰合理、性能和效果都能得到兼顾；而css2请求服务器次数要明显高于css3，因而它的性能和访问相较于css3较差
2、css3能够实现动画效果；而css2更偏向于表现
3、css3数据更加精简实用，许多css2中要用图片实现的效果，在css3中都可以通过代码直接实现
4、兼容问题，就目前来说css3是新事物，部分属性不能再浏览器中呈现，所以目前是使用css3来加强css2的效果

css3选择器：
1、属性选择器

element[attr^=value]{ css样式 } 指定了属性名称，并且以属性值value开头的元素
element[attr$=value]{ css样式 } 指定了属性名称，并且以属性值value结尾的元素
element[attr*=value]{ css样式 } 指定了属性名称，并且属性值中包含value的所有的元素

2、结构性伪类选择器

1）:root{ css样式 } 匹配文档根元素（html标签）

2) element:first-child{ css样式 } 在一组相同元素中选择第一个元素
3) element:last-child{ css样式 } 在一组相同元素中选择最后一个元素
4) element:nth-child(n){ css样式 } 在一组相同元素中选择第n个元素，n的取值：数值、关键词、表达式
    偶数：2n或even
    奇数：2n+1或odd
5)element:nth-last-child(n){ css样式 } 在一组相同元素中选择倒数第n个元素，n的取值：数值、关键词、表达式

6)element:nth-of-type(n){ css样式 } 在一组元素中选择与element一致（element类型）的第n个元素，n的取值：数值、关键词、表达式

7）element:only-child{ css样式 } 匹配属于父元素的唯一的子元素

文字阴影text-shadow：

            text-shadow: x轴偏移量 y轴偏移量 阴影的羽化值 阴影的颜色;

word-break文字换行形式

            word-break: break-all; 允许长单词或URL地址内部换行
            word-break: normal; 只允许在断字点换行（默认值）

英文特殊字体的使用：

        1、在系统中找到要用的特殊字体（系统安全字除外）
        2、在www.font2web.com中对字体进行转换
        3、将转换完成的fonts文件夹与fonts.css文件拷贝到网站目录中
        4、定义字体，在fonts.css文件中定义：
            @font-face{
                font-family:"字体的英文名称";
                src: url(字体路径),url(字体路径);
            }
         5、使用字体,链接fonts.css文件：
            <link rel="stylesheet" src="fonts.css的路径">
         在css样式中添加：
            font-family: "字体的英文名称";

图标字体的应用：

        1）在网站上下载图标字体
        2）将fonts文件夹拷贝到网站目录中
        3）将font-awesome.min.css文件拷贝到css文件夹中
        4）在应用图标字体的网页中导入font-awesome.min.css文件
            <link rel="stylesheet" href="css/font-awesome.min.css"/>
         5)在网页中指定图标应用 ‘类名 类名-图标名称’
            <em class="fa fa-taxi"></em>

            <em class="icon-图标英文名称"></em>

css3颜色模式：

        rgba(r,g,b,a)
            r-red红色，取值范围0~255
            g-green绿色，取值范围0~255
            b-blue蓝色，取值范围0~255
            a-alpha不透明度，取值范围0~1
        hsl(h,s,l)
            h-hue色调，取值0~360
            s-saturation饱和度，取值范围0%~100%
            l-lightness亮度，取值范围0%~100%

border-radius圆角

    */
    .box1{
        border-radius: 50%;
    }
    .box2{
        border-radius: 100px;/* 元素的左上、右上、右下、左下各有100像素的圆角*/
    }
    .box3{
        border-radius: 50px 100px;/* 元素的左上和右下各有50像素，右上和左下各有100像素的圆角*/
    }
    .box4{
        border-radius: 30px 60px 100px;/* 元素的左上30像素，右上和左下各有60像素的，右下有100像素，圆角*/
    }
    .box5{
        border-radius: 10px 30px 60px 100px;/* 元素的左上10像素，右上有30像素，右下有60像素的，左下有100像 
 素的圆角*/
    }

background-image多背景：

        background-image: url(), url();
    background-size 背景图尺寸
        background-size: 数值; 背景图按照比例缩放——一个水平方向，一个垂直方向
        background-size: cover; 覆盖，定比例缩放到铺满整个盒子，背景图可能无法完整的显示在盒子中
        background-size: contain;包含，等比例缩放图片到完整显示在盒子中，背景图片在区域内铺不满

background-origin: 背景图的定位区域

        background-origin: padding-box; 默认值，背景图在padding和content内容区显示
        background-origin: content-box; 背景图在content内容区显示
        background-origin: border-box; 背景图在border区、padding区和content内容区显示

background-clip: 背景的绘制区域

        background-clip: border-box; 默认值，背景在border区、padding区和content区显示
        background-clip: padding-box; 背景在padding区、content区显示
        background-clip: content-box; 背景在content区显示

盒子阴影：

            box-shadow: x轴偏移量 y轴偏移量 阴影的羽化值 [阴影的大小] 阴影的颜色 内阴影inset|外阴影（默认值）;
           */
        box-shadow: 0 0 0 10px #000 inset;