css3初识
知识点一：CSS3概述
1、CSS3简介
如同人类的的进化一样，CSS3是CSS2的“进化”版本，在CSS2基础上，增强或新增了许多特性，弥补了CSS2的众多不足之处，使得Web开发变得更为高效和便捷动画圆角阴影边框图片…
2、CSS3现状
1、浏览器支持程度差，需要添加私有前缀
-webkit- ：谷歌、Safari
-moz- ：火狐
-ms- ：IE
-o- ：欧朋
2、移动端支持优于PC端
3、不断改进中
4、应用相对广泛
知识点er：CSS3颜色
1、RGB
RGB颜色值指定：RGB（红，绿，蓝）。每个参数（红色，绿色和蓝色）定义颜色的亮度，可在0和255之间，或一个百分比值（从0％到100％）之间的整数。
000：黑色 255 255 255：白色
2、RGBA
RGBA颜色值指定：RGBA（红，绿，蓝，alpha）。 Alpha参数是一个介于0.0（完全透明）和1.0（完全不透明）之间的参数
3、十六进制颜色
指定一个十六进制的颜色其组成部分是：＃RRGGBB，其中RR（红色），GG（绿色）和BB（蓝色）。所有值必须介于0和FF之间。
4、HSL
HSL指定：HSL（色调(0-360，0代表红色，120代表绿色，240代表蓝色)，饱和度(0-100%)，亮度(0-100%)）
5、HSLA
HSL指定：HSL（色调(0-360，0代表红色，120代表绿色，240代表蓝色)，饱和度(0-100%)，亮度(0-100%)，alpha(0-1)）
知识点三：文本效果
1、文本阴影
text-shadow: 5px 5px 5px #FF0000;
text-shadow:水平阴影 垂直阴影 模糊的距离 阴影的颜色
2、文本溢出
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
知识点四：CSS3边框
1、圆角
border-radius: ;
2、盒子阴影
box-shadow:水平阴影 垂直阴影 模糊的距离 阴影的颜色
3、边界图片
border-image:url() 30 30 round:平铺(strech:拉伸);
知识点五：CSS3框
1、box-sizing属性：不管margin
box-sizing 属性允许你以某种方式定义某些元素，以适应指定区域。
box-sizing: content-box|border-box|inherit
|
值 |
说明 |
|
content-box |
这是 CSS2.1 指定的宽度和高度的行为。指定元素的宽度和高度（最小/最大属性）适用于box的宽度和高度。元素的填充和边框布局和绘制指定宽度和高度除外 |
|
border-box |
指定宽度和高度（最小/最大属性）确定元素边框。也就是说，对元素指定宽度和高度包括了 padding 和 border 。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。 |
|
inherit |
指定 box-sizing 属性的值，应该从父元素继承 |
2、调整尺寸
resize属性指定一个元素是否应该由用户去调整大小，搭配overflow：hidden；使用
resize: both(vertical:垂直方向 horizontal:水平方向);
知识点六：CSS3按钮
1、按钮颜色
使用 background-color 属性来设置按钮颜色
2、按钮大小
使用 font-size属性来设置按钮大小
3、圆角按钮
使用 border-radius 属性来设置圆角按钮
4、按钮边框颜色
使用 border 属性设置按钮边框颜色
5、鼠标悬停按钮
使用 :hover 选择器来修改鼠标悬停在按钮上的样式。
6、按钮阴影
使用 box-shadow 属性来为按钮添加阴影
7、按钮禁用
使用cursor 属性并设置为 "not-allowed" 来设置按钮禁用
8、按钮宽度
使用 width 属性来设置按钮的宽度， 如果要设置固定宽度可以使用像素 (px) 为单位，如果要设置响应式的按钮可以设置为百分比。
