CSS3基础学习笔记

1.CSS3简介

• CSS3是CSS的最新标准，且向后兼容早期的CSS版本。
• 重要的新功能包括过渡、形状转换、边界半径、边框图片、多个背景、动画（Animations）、特效（effect）、盒阴影（bos-shadow）、渐变（Gradients）等。

2.CSS3前缀

• 不同的浏览器有不同的内核，对应不同的内核，CSS3有不同的前缀，各浏览器的兼容性都在逐步提升。
• 主流浏览器内核：IE——trident；Opera——Blink；chrome——Blink；Firefox——Gecko；Safari——webkit。
• 内核对应前缀：Trident：-ms-；Gecko：-moz-；Presto：-o-；Webkit：-webkit。重申，由于主流浏览器的兼容性都在进步（多核），未来使用前缀的机会可能会越来越少。
  

3.border-radius属性

• 功能：给任意元素设置“圆角”。
• 指定一个值——设置4个圆角；指定两个值——第一个值为左上角和右下角，第二个值为右上角和左下角；指定三个值——第一个值为左上角，第二个值为右上角和左下角，第三个值为右下角；指定四个值——第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。
• 单位可以使用百分比。
• 要制作一个圆形，border-radius的值应设置为边长的一半（元素为正方形）。

4.box-shadow属性

• 功能：为元素增加阴影效果，多个阴影用逗号分离开哦。
• 常见6值：h-shado：必需。水平阴影的位置，允许负值。
  v-shadow：必需。垂直阴影的位置，允许负值。
  blur：可选。模糊距离。
  spread：可选。阴影的尺寸。
  color：可选。阴影的颜色。
  inset.：可选。从外层的阴影改变阴影。内测阴影。
• blur不允许使用负值，h-shadow、v-shadow、spread均可使用负值。
• 使用inset将在元素内部生成阴影，设置多个阴影后，显示顺序为先来者居上。

5.CSS3透明

• RGBA与RGB在颜色设置上效果相同，只是增加了透明度Alpha。
• RGBA——R：红色值。正整数|百分数；G：绿色值。正整数|百分数；B：蓝色值，正整数|百分数；A：透明度，取值0~1，值越小，越透明。
• 透明度亦可以用十六进制表示，注意，左侧是不透明度。

6.text-shadow属性

• 功能：向文本设置阴影。
• 常见4值：h-shadow、v-shadow、blur、color，前两个值为必需，后两个值为可选，含义参考box-shadow属性。
• 可以通过“，”分割同时创建多个阴影，显示顺序为先来者居上。

7.伪类

• 功能：在javascript不适用的情况下对特定的元素添加效果。
• 常用伪类：:first-child：匹配该元素的第一个子元素。
  :last-child：匹配最后一个子元素。
  :nth-child(n)：选择该元素中的第n个子元素。
  :nth-child(2n)：选择该元素中所有的偶数元素。
  :nth-child(2n+1)：选择该元素中所有的奇数元素。

8.伪元素

• 功能：添加一些选择器的特殊效果。
• 五个伪元素：::first-line：选择器中文本的第一行。
  ::first-latter：选择器中文本的最后一行。
  ::selection：选择用户选择的元素部分。
  ::before：在元素之前插入一些内容。
  :after：子元素之后插入一些内容。
• 伪元素和伪类的区别：伪类选择元素是基于元素当前的状态或特征，但元素的状态通常是动态的，它是基于文档之外的抽象，所以叫伪类；伪元素是对元素中的特定内容进行操作，它所操作的层次比伪类更深了一层，因此其动态性也更低，它也并不存在于文档中，所以叫伪元素 。

9.word-wrap属性

• 功能：允许长的内容可以自动换行。
• 常见2值：normal：只在允许的断字点换行（浏览器默认处理)
  break-word：在长单词或URL地址内部进行换行，对于长串的英文不起作用。

10.@font-face规则

• 功能：允许将自定义字体加载到网页中。
• 规则：font-family: myFirstFont;
  src: url(‘Sansation_Light.ttf’)（字体包含在服务器上）
  src: url(‘https://www.w3cschool.css/css3/Sansition_Light.ttf’)（字体在不同的位置）