CSS3文字与字体 text-overflow 与 word-wrap

text-overflow用来设置是否使用一个省略标记（...）标示对象内文本的溢出。

但是text-overflow只是用来说明文字溢出时用什么方式显示，要实现溢出时产生省略号的效果，还须定义强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden），只有这样才能实现溢出文本显示省略号的效果代码如下：

text-overflow:ellipsis;

overflow:hidden;

white-space:nowap;

同时，word-wrap也可以用来设置文本行为，当前行超过指定容器的边界时是否断开转行。

word-wrap:normal|break-word

normal为浏览器默认值，break-word设置在长单词或 URL地址内部进行换行，此属性不常用，用浏览器默认值即可

CSS3颜色 渐变色彩 

CSS3 Gradient 分为线性渐变(linear)和径向渐变(radial)。由于不同的渲染引擎实现渐变的语法不同，这里我们只针对线性渐变的 W3C 标准语法来分析其用法，其余大家可以查阅相关资料。W3C 语法已经得到了 IE10+、Firefox19.0+、Chrome26.0+ 和 Opera12.1+等浏览器的支持。

这一小节我们来说一下线性渐变：

linear-gradient(to bottom,#fff,#999)

linear:渐变类型（线性）径向：radial

to bottom:等价于180deg

#fff,#999:表颜色的起始点和结束点，可以有两至多个色值

参数：

角度                    用英文                                作用

0de                    to top                                从下向上

90deg                to right                              从左向右

180deg               to bottm                          从上向下

270deg              to left                               从右向左

                          to top left                     右下角到左上角

                           to top right                 左下角到右上角

第二个和对三个参数，表示颜色的1起始点和结束点，可以有多个颜色色值。

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

CSS3颜色 颜色之RGBA

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

语法：

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

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

代码示例：

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

border-imgage的语法：

border-imagage：url(border.png) 70 70 70 70 repeat

url(border.png) 图片路径

70 切割图片的宽度，单位为像素，但省略px也可以使用百分比，遵循顺时针的规律分别设置，也可以简写为70.

repeat 图片延伸方式

三个可选参数：round（平铺）repeat(重复)stretch(拉伸)

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

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

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

2、X轴偏移量和Y轴偏移量值可以设置为负数

box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];

X轴偏移量为负数：

.boxshadow-outset{
   width:100px;
   height:100px;
   box-shadow:-4px 4px 6px #666;
}

ox-shadow是向盒子添加阴影。支持添加一个或者多个。

很简单的一段代码，就实现了投影效果，酷毙了。我们来看下语法：

box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];

添加多个阴影：

以上的语法的介绍，就这么简单，如果添加多个阴影，只需用逗号隔开即可。如：

.box_shadow{
   box-shadow:4px 2px 6px #f00, -4px -2px 6px #000, 0px 0px 12px 5px #33CC00 inset;
}

在编写CSS3样式时，不同的浏览器可能需要不同的前缀。它表示该CSS属性或规则尚未成为W3C标准的一部分，是浏览器的私有属性，虽然目前较新版本的浏览器都是不需要前缀的，但为了更好的向前兼容前缀还是少不了的。

前缀           浏览器

   -webkit       chrome和safari

   -moz         firefox

   -ms      IE

   -o         opera

   

CSS3边框

double双线solid实线groove槽线ridge脊线dotted点线dashed虚线

CSS3颜色之RGBA

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

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

表格边框

border-collapse：collapse;相邻边被合并
border-collapse:separate;边框独立

1.圆角效果

border-radius是向元素添加圆角边框（值用px，也可用百分比或em但是兼容性不太好）

设置四个属性值，顺序分别是左上角、右上角、右下角和左下角，顺时针

2.阴影

box-shadow是向盒子添加阴影

box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式]；

inset可设置投影方式为内部阴影，省略则是外阴影

模糊半径只能为正值

3.为边框应用图片

图像透明度opacity取值0~1

可以理解为它是一个切片工具，会自动把用做边框的图片切割。怎么切割呢？为了方便理解，做了一张特殊的图片，由9个矩形（70*70像素）拼成的一张图（210*210像素），并标注好序号，是不是像传说中的九宫图

Round 参数：Round可以理解为圆满的铺满。为了实现圆满所以会压缩（或拉伸

根据border-image的语法：

CSS3变形

旋转rotate()

扭曲skew()

缩放scale()让元素根据中心原点对对象进行缩放

位移translate()使用此函数可以元素从原来的位置进行移动，而不影响在x,y轴的任何web组件

矩阵matrix()是一个含有6个值的(a,b,c,d,e,f)变换矩阵,用来指定一个2D变换，相当于直接应用一个[a b c d e f]变换矩阵.就是

基于水平方向X轴和垂直方向Y轴重新定位元素

原点transform-origin  取值：

CSS变形进行的旋转、位移、缩放，扭曲等操作都是以元素自己中心位置进行变形，但很多时候我们可以通过

transform-origin改变原点位置

在Responsive布局中，可以毫无保留的丢弃：

第一， 尽量少用无关紧要的div；

第二，不要使用内联元素（inline）；

第三，尽量少用JS或flash；

第四，丢弃没用的绝对定位和浮动样式；

第五，摒弃任何冗余结构和不使用100%设置。

-webkit  对应chrome和safari

-moz  对应firefox

-ms 对应IE

-o    对应opera

如果只表示偏移，matrix只要关注参数e和f就好，前面几个参数大家随意；如果表示缩放，则只关注参数a和d，a表示x轴，d表示y轴缩放；如果表示旋转，abcd分别表示cosθ,sinθ,-sinθ,cosθ；拉伸就用到b,c两个参数，分别表示tan(x)和tan(y)。说实话。。这很复杂啊。不过用martix才可以实现高端大气上档次的效果啊

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

resize: none | both | horizontal | vertical | inherit

取值说明：

属性值

取值说明

none

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

both

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

horizontal

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

vertical

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

inherit

继承父元素的resize属性值。
textarea {
  -webkit-resize: horizontal;
  -moz-resize: horizontal;
  -o-resize: horizontal;
  -ms-resize: horizontal;
  resize: horizontal;
}

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

各种设备都能浏览网页
网站必须建立灵活的网格基础；引用到网站的图片必须是可伸缩的；不同的显示风格，需要在Media Queries上写不同的样式。

1.流体网格
流体网格是一个简单的网格系统，这种网格设计参考了流体设计中的网格系统，将每个网格格子使用百分比单位来控制网格大小。这种网格系统最大的好处是让你的网格大小随时根据屏幕尺寸大小做出相对应的比例缩放。

2.弹性图片
弹性图片指的是不给图片设置固定尺寸，而是根据流体网格进行缩放，用于适应各种网格的尺寸
img {max-width:100%;}