CSS3是CSS技术的升级版本，CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂，所以，把它分解为一些小的模块，更多新的模块也被加入进来。这些模块包括： 盒子模型、列表模块、超链接方式 、语言模块 、背景和边框 、文字特效 、多栏布局等。
CSS3文本
text-overflow
1.clip: 隐藏超出文本
2.ellipsis: 超出部分使用省略号
例子
overflow:hidden;
text-overflow:clip;
对于省略号效果还需要其它属性配合
overflow:hidden; 超出的部分隐藏
text-overflow:ellipsis; 超出的文本省略号...
white-space: nowrap; 文本不换行
文本换行
word-wrap
word-wrap 属性允许长单词或 URL 地址换行到下一行
word-break
word-break 属性规定自动换行的处理方法
white-space
white-space 属性设置如何处理元素内的空白
normal 默认。连续空白会被浏览器忽略
pre 空白会被浏览器保留。其行为方式类似 HTML 中的标签
nowrap 文本不会换行，文本会在在同一行上继续，直到遇到
标签为止
pre-wrap 保留空白符序列，但是正常地进行换行
pre-line 合并空白符序列，但是保留换行符
inherit 规定应该从父元素继承 white-space 属性的值
text-shadows设置文字阴影
和box-shdow很像
可以设置偏移、颜色、阴影大小
text-shadow: x轴(X Offset) y轴(Y Offset) 模糊半径(Blur) 颜色(Color)
可以写多个，,隔开
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 40px #ff00de, 0 0 70px #ff00d
结合背景颜色，通过偏移距离负数或者颜色，可以做出各种效果
CSS3边框
border-radius
通过border-radius设置元素的圆角半径
对于正方形border-radius设置为边长的一半，就变成圆了
width: 100px;
height: 100px;
border-radius: 50px; //或者border-radius: 50%;
border-radius是缩写格式，其实border-radius和border属性一样，还可以把各个角单独拆分出来
border-radius: 50px 30px 20px 0; 表示左上、右上、右下、左下
半圆
.circle{
width: 100px;
height: 50px;
background: red;
border-radius: 50px 50px 0 0;
}
border-image
border-image几个属性详解
边框都是线条略显单调，使用CSS3可以用图片作为边框的修饰
source
和background类似，指定想使用的图片来源
border-image-source:url(image url);
width
指定border的宽度
border-image-width: 1;
repeat
三种repeat方式
- stretch 压缩或伸展border-image的背景图片以其刚好适应border-width的宽度
- repeat 简单的重复
- round 压缩或伸展border-image的背景图片以图片最小单元刚好适应border-width的宽度，在此基础上重复
slice
border-image-slice: number|%|fill;
此属性指定顶部，右，底部，左边缘的图像向内偏移，分为九个区域：四个角，四边和中间。图像中间部分将被丢弃（完全透明的处理）
有工具帮忙生成 border-image-generator
box-shadow
语法
box-shadow: h-shadow v-shadow blur spread color inset;
注意：boxShadow 属性把一个或多个下拉阴影添加到框上。该属性是一个用逗号分隔阴影的列表，每个阴影由 2-4 个长度值、一个可选的颜色值和一个可选的 inset 关键字来规定。省略长度的值是 0。
| 值 | 说明 |
| h-shadow | 必需的。水平阴影的位置。允许负值 |
| v-shadow | 必需的。垂直阴影的位置。允许负值 |
| blur | 可选。模糊距离 |
| spread | 可选。阴影的大小 |
| color | 可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表 |
| inset | 可选。从外层的阴影（开始时）改变阴影内侧阴影 |
box-shadow可以使用一个或多个投影，如果使用多个投影时必须需要用逗号,分开
box-shadow: 3px 3px 3px orange, 3px 3px 3px red;
用阴影属性写一个月亮
.circle{
width: 100px;
height: 50px;
border:1px solid red;
border-bottom:0;
border-radius: 50px 50px 0 0;
box-shadow: inset 0px 16px 0px -2px red;
}
box-sizing
box-sizing可以改变盒模型
传统的盒模型width就是指内容区域宽度，和padding、border没有关系，但是这在布局上带来一定的困难
content-box：标准盒模型
border-box：width = content width + paddingLeft + borderLeft + paddingRight + borderRight
background-size
- length:设置背景图像的高度和宽度，第一个值设置宽度，第二个值设置高度，如果只设置一个值，则第二个值会被设置为auto
- percentage: 以父元素的百分比来设置背景图像的宽度和高度，第一个值设置宽度，第二个值设置高度，如果只设置一个值，则第二个值会被设置为auto
- cover: 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域，背景图像的某些部分也许无法显示在背景定位区域中
- contain: 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域
图片全屏设置
<style>
html,body{
margin: 0;
height: 100%;
}
.box {
height:100%;
background: url(http://img2.imgtn.bdimg.com/it/u=3319314272,2780729326&fm=27&gp=0.jpg) no-repeat;
background-size:cover;
}
</style>
</head>
<body>
<div class="box"></div>
background-origin
background-origin 属性规定 background-position 属性相对于什么位置来定位
- padding-box: 背景图像相对于内边距框来定位
- border-box: 背景图像相对于边框盒来定位
- content-box: 背景图像相对于内容框来定位
如果背景图像的 background-attachment 属性为fixed，则该属性没有效果
background-clip
background-clip 属性规定背景的绘制区域
- padding-box: 背景被裁剪到边框盒
- border-box: 背景被裁剪到内边距框
- content-box: 背景被裁剪到内容框
多背景
在之前的CSS中只能使用一张背景图片，CSS3可以使用多张背景图片
background:url("haoroomsCSS1_s.jpg") 0 0 no-repeat,
url("haoroomsCSS2_s.jpg") 200px 0 no-repeat,
url("haorooms.jpg") 400px 201px no-repeat;
CSS3渐变
CSS3 定义了两种类型的渐变（gradients）：
- 线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
- 径向渐变（Radial Gradients）- 由它们的中心定义
CSS3 线性渐变
语法
#可以使用多个颜色结点
background: linear-gradient(direction, color-stop1, color-stop2, ...);
background: linear-gradient(red, blue); /* 默认从上到下 */
background: linear-gradient(to right, red , blue); /* 从左到右 */
background: linear-gradient(to bottom right, red , blue); /* 从左上角到右下角 */
background: linear-gradient(180deg, red, blue); /*带有指定的角度的线性渐变 */
background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /* 从完全透明，过渡到完全不透明的红色*/
/*rgba() 函数中的最后一个参数可以是从 0 到 1 的值，它定义了颜色的透明度：0 表示完全透明，1 表示完全不透明。*/
background: repeating-linear-gradient(red, yellow 10%, green 20%)/*重复线性渐变*/
CSS3 径向渐变
语法
background: radial-gradient(center, shape size, start-color, ..., last-color);
至少定义两种颜色结点，还可以指定渐变的中心、形状（原型或椭圆形）、大小。默认情况下，渐变的中心是 center（在中心点），渐变的形状是 ellipse（椭圆形），渐变的大小是 farthest-corner（表示到最远的角落）。
background: radial-gradient(red, green, blue); /*颜色结点均匀分布*/
background: radial-gradient(red 5%, green 15%, blue 60%);/*颜色结点不均匀分布*/
background: radial-gradient(circle, red, yellow, green);/*形状为圆形的径向渐变*/
background: repeating-radial-gradient(red, yellow 10%, green 15%)/*重复的径向渐变*/
background: radial-gradient(60% 55%, closest-side,blue,green,yellow,black)/*控制渐变尺寸大小*/
CSS3 过渡
用法
transition: property, duration, timing-function, delay
以下两种写法等价：
#1
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;
#2
transition: width 1s linear 2s;
CSS3 动画
利用CSS3创建的动画，可以取代许多网页动画图像，Flash动画，和JAVAScripts。
CSS3 @keyframes 规则
@keyframes用于定义动画的规则
@keyframes rainbow {
0% { background: #c00; }
50% { background: orange; }
100% { background: yellowgreen; }
}
rainbow效果一共有三个状态，分别为起始（0%）、中点（50%）和结束（100%）。如果有需要，可以插入更多状态。
定义了关键帧之后就可以给DOM元素绑定动画了，和事件很像
div:hover {
animation: 1s rainbow;
}
#加入infinite关键字，让动画无限次播放
div:hover {
animation: 1s rainbow infinite;
}
#指定动画具体播放的次数，比如3次
div:hover {
animation: 1s rainbow 3;
}
animation-fill-mode规定结束模式
- none：默认值，回到动画没开始时的状态
- forwards：让动画停留在结束状态
- backwards：让动画回到第一帧的状态
- both: 根据animation-direction（见后）轮流应用forwards和backwards规则
animation-direction指定了动画播放的方向
animation-play-state
如果想让动画保持突然终止时的状态，设置为paused
animation-play-state: paused;
animation-play-state: running;
工具
CSS3 Tool
CSS3变形
CSS3中transform属性包括以下几种：旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix
transform ： none | <transform-function> [ <transform-function> ]*
transform中使用多个属性时需要有空格隔开，可用于内联(inline)元素和块级(block)元素
旋转rotate
transform:rotate(30deg);//通过rotate使元素顺时针旋转一定的度数
transform-origin: 0% 0%;//通过transform-origin属性改变元素旋转的的基点,
//transform-origin的取值可以是top, bottom, left, right, center,百分数
旋转之后元素仍占据原来位置，实际上所有的transform都是这样，缩放、位移等都不会改变元素占据的位置
transform-origin属性对下面介绍的transform都有作用
位移
可以通过translate使元素平移
transform:translate(x,y);
transform:translate(200px,150px);
transform:translate(50%,50%);//相对于自身发生偏移,常用来代替margin-left和margin-top设定绝对定位实现垂直水平居中：
也可以简单只移动一个坐标
transform:translateX(100px);
transform:translateY(100px);
缩放scale
通过scale使元素缩放一定的比例
transform:scale(2, 0.5);//scale(x,y)：使元素水平方向和垂直方向同时缩放
transform:scaleY(0.3);//scaleY(y)：元素仅垂直方向缩放
transform:scaleY(2);//scaleX(x)：元素仅水平方向缩放
transform:scale(3);//scale只设置一个参数，一相同的比例缩放两个方向
扭曲skew
通过skew使元素扭曲一定的度数，和上面一样也有三种类似的用法
transform:skew(10deg, 20deg);//使元素水平方向和垂直方向同时扭曲
transform:skewX(10deg); //元素仅水平方向扭曲
transform:skewY(10deg); //元素仅垂直方向扭曲
transform:skew(10deg); //只设置一个参数，一相同的角度扭曲两个方向
3D
CSS3带来了DOM的3D效果，元素需要在transform属性中使用perspective方法来激活3D效果
2种方法
1.在transform属性中使用perspective方法
transform: perspective( 600px );
2.直接使用perspective属性
perspective: 600px;
perspective属性的值决定了3D效果的强烈程度，可以认为是观察者到页面的距离。值越大距离越远，视觉上的3D效果就会相应的减弱。
2种方法的不同
第一种方式直接在一个元素上触发3D变形，如果使用同样的方法作用于不同位置的元素的时候，每个元素会有自己的轴心
在父元素使用perspective属性，这样每个子元素都共享相同的3D空间
3D变形方法
在perspective激活的3D空间中我们可以在X、Y、Z三个坐标轴上对元素进行变形处理。3D变形使用的变形方法和2D变形一样
rotateX( angle )
rotateY( angle )
rotateZ( angle )
translateZ( tz )//使元素延Z轴（在3D空间中方向从前到后）移动
scaleZ( sz ) //缩放
translateX() //使元素延X轴移动（在3D空间中方向从前到后）移动。正值使元素离观察者更近，负值使元素变远。
立方体
css3立方体
媒体查询
作用：使页面在不同的终端设备下达到不同的效果，自动实现比例缩放
会根据设备的大小自动识别加载不同的样式（实现响应式效果的源头，bootstrap响应式设计的原理就是媒体查询）
<!-- meta标签移动端常用配置 -->
<meta name="viewport" content="width=device-width,
user-scalable=no,
initial-scale=1.0,
maximum-scale=1.0,
minimum-scale=1.0">
//这里表示屏幕可视宽度最大为768px，就是宽度小于768px时，使用此样式；
@media screen and (max-width: 768px) {
.box {
width: 100%;
height: 600px;
background-color: plum;
}
}
//这里表示屏幕可视宽度最小为768px，最大为996px，就是宽度大于768px,小于996px区间时，使用此样式；
@media screen and (min-width: 768px) and (max-width:996px) {
.box1 {
width: 100%;
height: 700px;
background-color: skyblue;
}
.btn2 {
display: block;
}
.btn1 {
display: none;
}
}
//这里表示屏幕可视宽度最小为996px，就是宽度小于996px时，使用此样式；
@media screen and (min-width:996px) {
.box1 {
width: 100%;
height: 800px;
background-color: yellowgreen;
}
}
