CSS3初识

CSS3帮助手册

CSS3一直在持续进化中，我们可以通过帮助文档去学习CSS3,下面把常用的文档罗列一下：

• w3school_css3

• Mozilla开发者网络

• CSS参考手册

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

作者：Rella7
链接：https://www.jianshu.com/p/6a7acbd5f650