CSS3新特性学习笔记

一、CSS3的新特性

1. 新选择器
2. 边框、背景升级、圆角、阴影
3. 新的盒模型
4. 渐变、动画、2D3D转换
5. 伸缩布局、多列布局
6. 新单位
7. 在线字体图标
8. 前缀应用、浏览器兼容、渐进增强

二、CSS文档的阅读规则

语法规则	说明
[]	表示全部可选项
||	表示多选一
|	代表多选一
*	代表出现0次或以上
+	代表出现1次或者以上
?	代表可选的，即出现0次或1次
{A}	代表出现A次
{A,B}	代表出现 A次以上B次以下，其中B可以省略为{A,}，代表至少出现A次，无上限

三、浏览器兼容前缀

由于各个厂商开发的浏览器使用的内核不同，在渲染css样式和支持新的css3的属性，存在不同，为了使网页兼容各大浏览器，可以在写css代码时，在一些特定的css属性前加上前缀，以保证兼容。比如：-webkit-、-moz-、-ms-和-o-。

四、CSS3新增的相关属性

（一）、颜色相关

1、css2颜色的表示方法：颜色名、十六进制、rgb、transparent.

    color:red;
    background-color:#eee;
    color:rgb(22,33,0);
    border-bottom-color:transparent;  /*透明*/

2、css3新增方法：

（1）、RGBA—— R：red，G：green，B：blue，A:alpha
R，G，B的取值范围：0-255，其中A表示透明度通道，取值0-1之间。0-完全透明，1-完全不透明。

    color:rgba(22,22,22,.5);    

（2）、HSLA—— H：Hue（色调），S：saturation，L：lightness，A：alpha
Hue-色度，取值0-360，0或者360表示红色，

3、opciey——透明度
opcity只能针对整个盒子设置透明度，子盒子及内容会继承父盒子的透明度。
注意： transparent不可调节透明度，始终完全透明，RGBA、HSLA可以应用于所有有颜色的地方。

（二）、文本

1. text-shadow——文本阴影

语法：text-shadow:none|<shadow[,shadow]*> =<length>{2,3} && ?
text-shadow: h-shadow v-shadow blur color;

说明： 设置或检索对象中文本的文字是否有阴影及模糊效果；
可以设定多组效果，每组参数用“,”分隔。

取值：

• none：无阴影
• <length>①：第1个长度值用来设置对象的阴影水平偏移值，可以为负值；
• <length>②：第2个长度值用来设置对象的垂直阴影偏移值，可以为负值；
• <length>③：第3个长度值用来设置对象的阴影模糊值。不允许为负值。可以不设置
• <color>：设置对象阴影的颜色。

实例：

    text-shadow: 2px 3px 4px #0096BE;  /*单重阴影*/
    text-shadow: 2px 3px 4px #0096BE,5px 6px 4px #C71585;   /*双重阴影*/

2. text-overflow——文本溢出处置

说明：text-overflow 属性规定当文本溢出包含元素时发生的事情。

语法：text-overflow: clip|ellipsis|string;

注意：定义此属性有4个必要条件：

• 1）、容器有宽度，width:value;
• 2）、强制文件在一行内显示，white-space:nowrap;
• 3）、溢出内容隐藏，overflow:hidden;
• 4）、溢出文本显示"…"，text-overflow:ellipsis;

（三）边框

1. border-radius——圆角边框

说明：设置元素对象的外边框圆角，属性值可以是数值，也可以是百分比。

#box1{
	width: 300px;
	height: 200px;
	background-color: #0073B3;
	border:30px;  /* 单值：所有角半径均为30 */
	border-radius: 10px 30px;  /* 双值：对角线取值，左上<-->右下，10px；右上<-->左下，30px*/
	border-radius: 10px 30px 50px; /* 三值：左上,10px；右上<-->左下，30px; 右下，50px*/
	border-radius: 10px 30px 50px 100px; /* 四值： 左上,10px；右上，30px; 左下，50px; 右下，100px*/
}