初识CSS3

一、边框

1.border-radius
2.box-shadow:X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];
x轴偏移量；+：代表偏移在右边 -：偏移在左边
box-shadow:4px 4px 6px #666; box-shadow:-4px 4px 6px #666;

左右阴影

box-shadow:4px 4px 6px #666; box-shadow:4px -4px 6px #666;

上下阴影

投影方式
box-shadow:4px 4px 6px #666 inset; box-shadow:-4px -4px 6px #666 inset;

内阴影

浏览器支持：IE9+、Firefox 4、Chrome、Opera 以及 Safari 5.1.1
3.border-image：url(),上下左右,repeat/round/stretch
浏览器支持：Internet Explorer 11, Firefox, Opera 15, Chrome 以及 Safari 6 支持 border-image 属性。
兼容老版本Firefox：添加前缀-moz-
兼容老版本Safari、chrome：添加前缀-webkit-
兼容老版本opera：添加前缀-o-

二、颜色

1.RGBA
**语法
R：红色值。正整数 | 百分数
G：绿色值。正整数 | 百分数
B：蓝色值。正整数| 百分数
A：透明度。取值0~1之间
浏览器的支持：IE9+、Firefox 3+、Chrome、Safari 以及 Opera 10+。
2.线性渐变
background-image:linear-gradient(to top left,red,orange,yellow);

渐变效果

第一个参数

第一个参数

兼容性：
兼容老版本Firefox：添加前缀-moz-
兼容老版本Safari、chrome：添加前缀-webkit-
兼容老版本opera：添加前缀-o-
支持IE10+

三、文本和字体

1.text-overflow: clip |ellipsis |string;

值	描述
clip	修剪文本。
ellipsis	显示省略符号来代表被修剪的文本。
string	使用给定的字符串来代表被修剪的文本。

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

2.word-wrap 属性允许长单词或 URL 地址换行到下一行。
定义：word-wrap: normal|break-word;

3.text-shadow可以用来设置文本的阴影效果。
text-shadow: X-Offset Y-Offset blur color;
所有主流浏览器都支持 text-shadow 属性。
注释：Internet Explorer 9 以及更早版本的浏览器不支持 text-shadow 属性。

四、背景

1.background-origin 属性规定 background-position 属性相对于什么位置来定位。
语法：
background-origin ： border-box | padding-box | content-box;
参数分别表示背景图片是从边框，还是内边距（默认值），或者是内容区域开始显示。
浏览器支持：IE9+、Firefox 4+、Opera、Chrome 以及 Safari 5+ 支持 background-origin 属性。

2.background-clip 属性规定背景的绘制区域。
语法：
background-clip ： border-box | padding-box | content-box | no-clip
参数分别表示从边框、或内填充，或者内容区域向外裁剪背景。no-clip表示不裁切，和参数border-box显示同样的效果。backgroud-clip默认值为border-box。
浏览器支持：
IE9+、Firefox、Opera、Chrome 以及 Safari 支持 background-clip 属性。
注释：Internet Explorer 8 以及更早的版本不支持 background-clip 属性。

3.background-size 属性规定背景图片的尺寸。
语法：
background-size: auto | <长度值> | <百分比> | cover | contain
取值说明：
1>、auto：默认值，不改变背景图片的原始高度和宽度；
2>、<长度值>：成对出现如200px 50px，将背景图片宽高依次设置为前面两个值，当设置一个值时，将其作为图片宽度值来等比缩放；
3>、<百分比>：0％~100％之间的任何值，将背景图片宽高依次设置为所在元素宽高乘以前面百分比得出的数值，当设置一个值时同上；
4>、cover：顾名思义为覆盖，即将背景图片等比缩放以填满整个容器；
5>、contain：容纳，即将背景图片等比缩放至某一边紧贴容器边缘为止。

3.CSS3 允许您为元素使用多个背景图像。