CSS3

什么是CSS3?
CSS3就是CSS2的升级版本，3只是个版本号，它在css2.1的基础上增加了很多强大的功能。
在编写css样式时，不同的浏览器需要不同的前缀。

-webkit chrome和safari
-moz fiefox
-ms IE
-o opera
接下来我们看看CSS3有哪些好玩的东西呢？
第二章：边框
1.border-radius
2.box-shadow
box-shadow:
x轴偏移量 y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];
具体参数如下：
- x轴偏移量： 必须，水平阴影的位置，允许负值
- y轴偏移量： 必须，垂直阴影的位置，允许负值
- 阴影模糊半径： 可选，模糊距离
- 阴影扩展半径： 可选，阴影的尺寸
- 阴影颜色： 可选，阴影的颜色，省略默认为黑色。
- 投影方式： 可选，设置inset时 为内部阴影方式，如果省略为外部阴影方式。
3.border-image
为盒子镶一个图片边框
border-image：url(border-image.png) 70 70 70 70 repeat;
- url 图片路径
- 70 切割图片的高度
- repeat 图片延伸方式：3个值
round（平铺）
repeat（不重复）
stretch（拉伸）

.border-image{          width: 210px;          height: 210px;          background: #f99;          border: 70px solid #ccc;          border-image: url("img/border-image.jpg") 70 repeat;}

第三章：颜色相关
1.CSS颜色-RGBA
语法：
color : rgba(R,G,B,A);

.rgba{    width: 100px;    height: 100px;    background-color: rgba(100,120,60,0.5);}

1. CSS3颜色 渐变色彩
   CSS3 Gradient 分为线性渐变（linear）和 径向渐变（radial）。
   线性渐变：
   linear-gradient(to bottom,#fff,#999);
   linear-gradient 渐变类型 径向radial。
   to bottom 等价于 180deg。
   fff,999表示颜色的起始点和结束点。可以有两至多个颜色。

.gradient{            width: 400px;            height: 200px;            line-height: 200px;            text-align: center;            background-image: linear-gradient(to left,red,orange,yellow,green,blue);}

四、文字与字体
1.text-overflow
用来设置是否用一个省略号标记（……），标示文本的溢出。
语法：

text-overflow： clip | ellipsis；clip：表示剪切ellipsis：表示显示省略标记；

但text-overflow只是说明文字溢出时，用什么方式显示。
要实现溢出时产生省略号的效果还需要：

overflow: hidden; //超出的内容隐藏white-space: no-wrap;不换行

同时：

word-wrap： normal | break-word;normal: 表示控制连续文本换行break-world： 表示文本将在边界内换行。

css代码.text-overflow{    width: 300px;    height: 30px;    line-height: 30px;    background: yellow;    text-overflow: ellipsis;    overflow: hidden;    /*white-space: nowrap;*/    /*word-wrap: normal;*/}

html代码：

<div class="text-overflow">    做事要有计划，要为计划付诸行动,我们要做的很多。    做事要有计划，要为计划付诸行动,我们要做的很多。    做事要有计划，要为计划付诸行动,我们要做的很多。    做事要有计划，要为计划付诸行动,我们要做的很多。    做事要有计划，要为计划付诸行动,我们要做的很多。</div>

2.CSS3文字与字体 嵌入字体@font-face
@font-face 能够加载服务器端的字体文件，让浏览器端可以显示用户电脑没有安装的字体。
语法：

@font-face{    font-family: 字体名称;    src: 字体文件在服务器上的相对或者绝对路径;}

这样设置之后，就可以像使用普通字体一样在（font-*）中设置字体样式。
比如：

p{    font-size: 12px;    font-family: "My Font";}

css3代码：

@font-face{        font-family: "MOOC Font";        src: url("http://www.imooc.com/Amaranth-BoldItalic.otf");    }    .font-face {        width: 340px;        padding: 30px;            color: #fff;        background: #f99;        font-size:22px;        font-family: "MOOC Font";    }

html代码

<div class="font-face">        English</div>

注意:上面的字体只适合英文，不适合中文。
3.text-shadow
可以用来设置文本的阴影效果。
语法：

text-shadow: X-Offset Y-Offset blur color;X-Offset 表示阴影的水平偏移距离，其正向右，反之亦然Y-Offset 表示阴影的垂直偏移距离，其正向下，反之亦然Blur 指阴影的模糊程度，其值不能是负值，如果值越大，阴影越模糊。Color 指阴影的颜色

.text-shadow{width: 100px;    height: 100px;    font-size: 22px;    background: yellow;    text-shadow: 10px 10px 0 #9ff; }.center{    display: flex;    justify-content: center;    align-items: center;}

<div class="text-shadow center">    祖国</div>

center是flex的一种布局，目的是为了让文字垂直居中对齐；
第五章：与背景有关的样式
1.background-origin
语法：

background-origin： border-box | padding-box | content-box；

参数分别表示图标从边框 、内边距（默认值）或者是内容区开始。

.background-origin{    width: 300px;    height: 300px;    background: #9ff url(img/border-image.jpg) no-repeat;    padding: 20px;    border: 20px dashed #9f9;    background-origin: border-box;}

3.background-size
background-size: auto | 长度值 | 百分比 | contain | cover;
注意：
auto：默认值
长度值：需要设置两个值，分别代表 宽度 和 高度
百分比：0 - 100 之间的数
contain： 容纳
cover： 覆盖

.background-size{    width: 200px;    height: 200px;    background: yellow url(img/border-image.jpg) no-repeat;    background-size: 200px 100px;}

4.CSS3背景 multiple backgrounds
多重背景，也就是CSS2里background的属性外加origin、clip和size组成的新background的多次叠加，缩写时为用逗号隔开的每组值；用分解写法时，如果有多个背景图片，而其他属性只有一个（例如background-repeat只有一个），表明所有背景图片应用该属性值。
语法缩写如下：

background ： [background-color] | [background-image] | [background-position][/background-size] | [background-repeat] | [background-attachment] | [background-clip] | [background-origin],...

可以把上面的缩写拆解成以下形式：

background-repeat : repeat1,repeat2,...,repeatN;backround-position : position1,position2,...,positionN;background-size : size1,size2,...,sizeN;background-attachment : attachment1,attachment2,...,attachmentN;background-clip : clip1,clip2,...,clipN;background-origin : origin1,origin2,...,originN;background-color : color;

注意：
1.用逗号隔开每组 background 的缩写值；
2.如果有 size 值，需要紧跟 position 并且用 “/” 隔开；
3.如果有多个背景图片，而其他属性只有一个（例如 background-repeat 只有一个），表明所有背景图片应用该属性值。
4.background-color 只能设置一个。
示例代码如下：

.multiple-backgrounds{    width: 600px;    height: 300px;    background: #f99;    border: 5px solid #d00;    background-image: url(img/7.jpg),                        url(img/8.jpg),                        url(img/9.jpg);    background-position: 0 0,100px 0,200px 0;    background-repeat: no-repeat,no-repeat,no-repeat;}