text-overflow:

        定义：

                用来说明文字溢出时用什么方式显示

        方式：

                1、clip：表示剪切

                2、ellipsis：表示显示省略标记

white-space:

          定义：

                  如何处理元素内部的空白

          属性：

                    nowrap：不换行

                    normal：默认属性，超出则换行

需要配合white-space:nowrap；overflow:hidden 一起使用来达到溢出显示省略号的效果

线性渐变：

        语法：

                linear-gradient(渐变方向，起点颜色，重点颜色)

        参数：

                角度                英文                         作用

                0deg                to top                    从下向上

                90deg              to right                  从左向右

                180deg            to bottom               从上向下

                270deg            to left                      从右向左

                                         to top left               右上角到左上角

                                         to top right             左下角到右上角

        限制：

                用于设置背景图片，单独使用无效果

        示例：

                 background-image: linear-gradient(to left,red,orange,yellow,green,blue,indigo,violet);

RGB:

        是一种色彩标准，是由红（R）、绿（G）、蓝（B）的变化及相互叠加来得到各式各样的颜色。RGBA是在RGB的基础上增加了控制alpha透明度的参数

语法：

        color：rgba(R,G,B,A)

        以上R、G、B三个参数，正整数值的取值范围为：0 - 255。百分数值的取值范围为：0.0% - 100%。超出范围的数值将被截至其最接近的取值极限。并非所有游览器都支持使用百分数值。A为透明度参数，取值在0~1之间，不可为负值。

示例：

        background-color:rgba(100,120,60,0.5)

border-image：

    定义：

            为边框设置好看的背景图片

    参数：

            第一个参数：url(图片路径) 

            第二个参数（切换图片的宽度，单位为px）：左上 右上 右下 左下 也可设置一个值

            第三个参数（图片延伸方式）：

                                1.round 平铺

                                2.repeat 重复

                                3.stretch 拉伸

阴影模糊半径与阴影扩展半径的区别

        阴影模糊半径：此参数可选，其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊；

        阴影扩展半径：此参数可选，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值时，则缩小；

box-shadow:

    定义：

            X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展办展半径] [阴影颜色] [投影方式] 如果多个阴影用逗号隔开

    参数：

            X轴偏移量：必需，水平阴影的位置。允许负值

            Y轴偏移量：必需。垂直阴影的位置。允许负值

            阴影模糊半径：可选。模糊距离

            阴影扩展办展半径：可选。阴影的尺寸

            阴影颜色：可选。阴影的颜色。省略默认为黑色

            投影方式：可选。（设置inset时为内部阴影方式，如果省略为外阴影方式）

border-radius：

    定义：

            向元素添加圆角边框

    使用方法：

            顺时针设置：左上角、右上角、右下角、左下角

    单位：最好用px，因为兼容性最好

什么是CSS3？

其实only很多时候是用来对那些不支持Media Query但却支持Media Type的设备隐藏样式表的。

支持媒体特性的设备，正常调用样式，此时就当only不存在；表示不支持媒体特性但又支持媒体类型的设备，这样就会不读样式，

background-image: linear-gradient(to left,#0ff,#ff0)  渐变色

word-wrap :normal  连续文本换行

break-word 边界换行

text-overflow :clip 剪切   ellipsis 省略标记

Responsive设计——不同设备的分辨率设置

下面我们一起来看看CSS3 Meida Queries在标准设备上的运用，大家可以把这些样式加到你的样式文件中，或者单独创建一个名为“responsive.css”文件，并在相应的条件中写上你的样式，让他适合你的设计需求：

1.1024px显屏

@media screen and (max-width : 1024px) {                     /* 样式写在这里 */           }    

2.800px显屏

@media screen and (max-width : 800px) {               /* 样式写在这里 */           }    

3.640px显屏

@media screen and (max-width : 640px) {               /* 样式写在这*/             }    

4.iPad横板显屏

@media screen and (max-device-width: 1024px) and (orientation: landscape) {               /* 样式写在这 */             }    

5.iPad竖板显屏

@media screen and (max-device-width: 768px) and (orientation: portrait) {          /* 样式写在这 */             }    

6.iPhone 和 Smartphones

@media screen and (min-device-width: 320px) and (min-device-width: 480px) {               /* 样式写在这 */             }    

现在有关于这方面的运用也是相当的成熟，twitter的Bootstrap第二版本中就加上了这方面的运用。大家可以对比一下：

@media (max-width: 480px) { ... }              

@media (max-width: 768px) { ... }              

@media (min-width: 768px) and (max-width: 980px) { ... }      

 @media (min-width: 1200px) { .. }

自由缩放属性resize

为了增强用户体验，CSS3增加了很多新的属性，其中resize就是一个重要的属性，它允许用户通过拖动的方式来修改元素的尺寸来改变元素的大小。到目前为止，可以使用overflow属性的任何容器元素。

在此之前，Web设计师为了要实现这样具有拖动效果的UI，使用大量的脚本代码才能实现，这样费时费力，效率极低。

resize属性主要是用来改变元素尺寸大小的，其主要目的是增强用户体验。但使用方法却是极其的简单，先从其语法入手。

resize: none | both | horizontal | vertical | inherit

取值说明：

属性值

取值说明

none

用户不能拖动元素修改尺寸大小。

both

用户可以拖动元素，同时修改元素的宽度和高度

horizontal

用户可以拖动元素，仅可以修改元素的宽度，但不能修改元素的高度。

vertical

用户可以拖动元素，仅可以修改元素的高度，但不能修改元素的宽度。

inherit

继承父元素的resize属性值。

例如：通过resize属性，让文本域可以沿水平方向拖大。代码为：

textarea {   -webkit-resize: horizontal;   -moz-resize: horizontal;   -o-resize: horizontal;   -ms-resize: horizontal;   resize: horizontal; }

CSS3 多列布局——Columns

语法：

columns：<column-width> || <column-count>

多列布局columns属性参数主要就两个属性参数：列宽和列数。

参数

参数说明

<column-width>

主要用来定义多列中每列的宽度

<column-count>

主要用来定义多列中的列数

举例：要显示2栏显示，每栏宽度为200px，代码为：

品牌                                           前缀

Chrome                                   -webkit-    

Firefox                                     -moz-    

IE、Edge                                  -ms-    

欧朋                                         -o-    

CSS3 布局样式相关

多列布局——columns

columns：<column-width>主要用来定义多列中每列的宽度 || <column-count>主要用来定义多列中的列数

多列布局columns属性参数主要就两个属性参数：列宽和列数

column-width:auto||<length>

      auto属性值：设置为auto或没有显示的设置值时，元素多列的列宽将由其他属性来决定，比如前面的示例额就是由列数column-cout来        决定。

      <length>属性值：只能为正值，其主要由数值和长度单位组成

column-cout:auto||<integer>

       auto:默认值，表示元素只有一列，其主要依靠浏览器计算自动设置

      <integer>:此值为正整数，主要用来定义元素的列数，取值为大于0的整数，负值无效

column-gap:normal||<length>设置列间距

      normal:默认值，1em（如果你的字号是px，其默认值为你的font-size值）

      <length>:不能为负值，可以使用px，em

column-rule:<column-rule-width>|<column-rule-style>|<column-rule-color>用来定义列与列之间的边框宽度、边框样式和边框颜色。类似常用的border属性（column-rule不会占用任何空间位置）

      column-rule-width:默认值medium，不能使用负值类似border-width，用来定义列边框的宽度（可以使用关键字，medium、thick        和thin）

      column-rule-style：默认值none。类似border-style，用来定义边框样式，可以使用solid、dotted、dashed等。

      column-rule-color：类似border-color，用来定义边框颜色

column-span:none|all用来定义一个分列元素中的子元素能跨列多少

      none：默认值，表示不跨越任何列

      all：这个值和none值刚好相反，表示元素跨越所有列，并定位在列的Z轴

盒子模型

box-sizing：content-box|border-box|inherit：能够事先定义盒模型的尺寸解析方式

content-box：默认值

border-box：重新定义CSS2.1中盒模型组成的模式，让元素维持IE传统的盒模型（IE6以下版本和IE6-7怪异模式），也就是说元素的宽度或高度等于元素内容的宽度或高度。从上面盒模型介绍可知，这里的内容宽度或高度包含了元素的border、padding、内容的宽度或高度（此处的内容宽度或高度＝盒子的宽度或高度—边框—内距）

inherit：使元素继承父元素的盒模型模式

标签:not([否定])

否定选择器 例如div:not([id="footer"]){background:orange}

指的是所有div，除了id为footer的，全部设置背景颜色为background