CSS3帮助手册
CSS3一直在持续进化中，我们可以通过帮助文档去学习CSS3,下面把常用的文档罗列一下：
CSS3简介
CSS3为我们提供了很多让人兴奋的新样式,但是由于浏览器的兼容性问题,所以并不是所有的浏览器都能够使用
不过这并不影响我们学习以及使用它
前缀:
- 浏览器厂商在实现CSS3的效果时,有的还有的还在测试阶段,为了保证显示效果,我们在使用某些属性的时候需要添加额外的前缀
- 举个例子:我要使用属性
xxx- -ms-xxx:ie浏览器
- -moz-xxx:FireFox浏览器
- -o-xxx:Opera浏览器
- -webkit-xxx:Chrome以及Safari
Trident内核(IE)： 前缀为 -ms
Gecko内核(FireFox)： 前缀为 -moz
Presto内核(Opera)： 前缀为 -o
Webkit内核(Chrome,Safari)： 前缀为 -webkit
核心知识点
CSS3的所有样式都分为模块，其中最重要的是
- 选择器
- 框模型
- 背景和边框
- 文本效果
- 2D/3D 转换
- 动画
- 多列布局
- 用户界面
CSS中出现的新属性
selection
-
语法：
- 选中时的样式
- 只能设置的属性有
background-color,color,text-shadow
E::selection
placeholder
该属性处于测试阶段，需要配合浏览器前缀使用
-
语法：
- 设置
input标签placeholder属性的显示颜色
- 设置
E::selection
- 示例代码：
<input type="text" placeholder="占位符" />
input::-webkit-input-placeholder {
color: #999;
}
input:-ms-input-placeholder { // IE10+
color: #999;
}
input:-moz-placeholder { // Firefox4-18
color: #999;
}
input::-moz-placeholder { // Firefox19+
color: #999;
}
颜色
新增了
RGBA、HSLA模式，其中的A表示透明度通道，即可以设置颜色值的透明度，跟opacity相比，它们不具有继承性，即不会影响子元素的透明度。
-
RGBA
- Red：0-255
- Green：0-255
- Blue：0-255
- Alpha：0-1（小数）
- 注意，不使用A那么认为没有透明度
color:RGBA(100,100,100,0.3);
color:RGB(100,100,100);
-
HSLA
- Hue(色调):0-360
- Saturation(饱和度):0-100%
- Lightness(亮度):0-100%
- Alpha(透明度):0-1（小数）
color: hsla(308, 85%, 58%, 1);
color: hsl(308, 85%, 58%);
-
取色：
- 使用
PS的拾色器即可 - 在线颜色转换
- 使用
-
透明度说明：
-
opacity只能针对整个盒子设置透明度，子盒子及内容会继承父盒子的透明度 ，他是作为CSS的属性来使用的 -
transparent始终完全透明，他是作为颜色的取值来使用color:transparent
-
-
适用范围：
- 所有可以使用颜色的地方，都能够使用
RGBA以及HSLA
- 所有可以使用颜色的地方，都能够使用
