css3学习笔记（一）

CSS3学习笔记

一，兼容性

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

前缀	浏览器
-webkit	chrome&safari
-moz	firefox
-ms	IE
-o	opera

二，边框

1，圆角效果 border-raidus

border-radius:10px; /* 所有角都使用半径为10px的圆角 */
border-raidus:2px 3px 4px 5px; /*四个半径值分别是左上，右上，右下，坐下，顺时针*/

实心圆方法：

border-raidus:10px;/*元素宽高均为10px*/

2，阴影 box-shadow

box-shadow:4px 2px 6px #333333;

4px：x轴偏移量 必须有，水平方向，允许负值

2px：y轴偏移量 必须有，垂直方向，允许负值

6px：[阴影模糊半径] 可选，模糊距离，值越大越模糊，>=0

未写：[阴影扩展半径] 可选，阴影的尺寸,值可正负

#333333：[阴影颜色] 可选，缺省为黑

未写：[投影方式] 可选，inset为内阴影，缺省为外阴影

多个阴影用逗号隔开。

三,颜色

1，rgba：

color:rgba(r,g,b,a)/*a为透明度，取值0~1*/

2，颜色渐变：

background:linear-gradient(to bottom ,#fff,#999);

linear-gradient:渐变类型

to bottom:渐变方向，还可以为：to top,toleft,toright,to top left,to top right

#fff:起始颜色

#999:终止颜色

     颜色值可以放多个，在起始和终止之间

四，文字、文本

1，实现文本溢出时用（......）表示：

text-overflow:ellipsis;/*溢出时的表示方式，此处为用省略号表示，还可以为clip（剪切）*/
overflow:hidden;/*溢出内容隐藏*/
white-space:nowrap;/*强制文本在一行内显示*/

2，文本阴影：text-shadow:X-offest Y-offset blur color;

X-offest :水平方向，正右负左

Y-offset :垂直方向，正下负上

blur :模糊值，>=0,

color :阴影颜色，可使用rgba

3，引入本地字体：@font-face

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