css3学习笔记1

css3介绍
1.首先处理各版本浏览器兼容性

----------------------------

| 前缀     |  浏览器

| -webkit  |chrome和safari

| --------------------------

| -moz     |firefox

| --------------------------

| -ms      |IE

| --------------------------

| -o       |opera

 ---------------------------
2-1.圆角效果border-radius

border-radius:10px;

border-radius:5px 4px 3px 2px;|左上角、右上角、右下角和左下角；顺时针方向。

2-2.阴影 box-shadow

box-shadow向盒子添加阴影，支持添加一个或者多个

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

添加多个阴影，中间用逗号隔开

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

2-3.为边框应用图片border-image

border-image:url(borderimg.png) 70 70 70 70 repeat;

上面70表示图片被切割的宽度。

图片延伸方式：round(平铺) repeat（重复） stretch（拉伸）

3.颜色之RGBA

color:rgba(R,G,B,a);a表示alpha透明度，是一个百分比。

css3的渐变色gradient分为线性渐变linear和径向渐变radial

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

4-1.文本阴影text-shadow

text-shadow:X-offset Y-offset blur color;

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

text-overflow:clip  |  ellipsis

              表示剪切  表示显示省略标记

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

word-warp:normal    |    break-word

        控制连续整体文本  内容在边界内换行。

4-3.@font-face能够加载服务器端的字体文件，让浏览器段可以显示客户端没有安装的字体

@font-face{

 font-family:字体名称;

 src:字体在服务器上的相对或绝对位置

}

设置成功之后，就可以按照普通字体调用

p{

 font-size:12px;

 font-family:"字体名称";

}

5-1.与背景相关的图片

background-origin设置元素背景图片的原始起始位置

background-origin:border-box | padding-box|content-box;

参数分别表示背景图片是从边框还是内边距（默认），或者内容区开始显示

5-2.background-clip裁剪背景图片

background-clip:border-box（默认）|padding-box|content-box|no-clip

参数分别表示从边框、内填充、内容区向外裁剪背景，no-clip表示不裁剪

5-3.background-size设置背景图片的大小，以长度值或百分比显示，

语法：

background-size: auto | <长度值> | <百分比> | cover | contain

取值说明：

1、auto：默认值，不改变背景图片的原始高度和宽度；

2、<长度值>：成对出现如200px 50px，将背景图片宽高依次设置为前面两个值，当设置一个值时，将其作为图片宽度值来等比缩放；

3、<百分比>：0％~100％之间的任何值，将背景图片宽高依次设置为所在元素宽高乘以前面百分比得出的数值，当设置一个值时同上；

4、cover：顾名思义为覆盖，即将背景图片等比缩放以填满整个容器；

5、contain：容纳，即将背景图片等比缩放至某一边紧贴容器边缘为止。

5-4.多重背景

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的缩写值；如果有size值，需要紧跟position并且用"/"隔开；
分解写法时，background-color只能设置一个。

课程链接：http://www.imooc.com/learn/33