CSS3的学习

1、选择器

css3元素选择器

css3属性选择器

css3子选择器

css3伪类选择器

文本选择器

before 事例

表单选择器

2、浏览器前缀：

火狐：-omz-

谷歌、苹果：-webkit-

ie：-ms-

opera：-o-

3、rgba 字体单位 text-shadow box-shadow

a、rgba

表示红、绿、蓝、a表示透明度，1为不透明，0.5为半透明

opacity设置透明度是时，会将内容文字透明。

rgba只将背景透明，不影响内容文字。例：background：rgba（163，73，164，0.6）；

b、字体单位

字体单位

rem使用事例：

rem使用事例

使用vw调试文字大小（目前主流）：按照浏览器的宽度百分比调

例如：10vm，浏览器宽度的10%

font-size: 12px; ——/*IE6-8*/

font-size: 5vm; ——/*IE9*/

font-size: 5vmin; ——/*其他浏览器*/

c、文字样式——文本溢出

文字样式

d、文本阴影

文字阴影

e、盒子阴影

盒子阴影

4、盒子尺寸 box-sizing 分栏 background-size

a、盒子尺寸

盒子尺寸

b、盒子空间

盒子空间box-sizing

c、分栏

分栏

分栏实例

d、背景尺寸

background-size：100 100，改变宽高

background-size：100，宽度100，高度等比例缩放

宽高设为：background-size：100% 100%，可撑满。

background-size：cover，会让宽度变为100%，高度等比例缩放

background-size：contain，会让高度变为100%，宽度等比例缩放

background-size背景尺寸

背景尺寸实例

e、轮廓线outline

outline

轮廓线outline及linear-gradient的实例：

轮廓线outline及linear-gradient的实例

f、线性渐变

线性渐变

5、利用media方式实现pc端响应式布局

media query

6、transition过渡效果

transition过渡效果

transition过渡动画

transition过渡动画

7、transform过滤效果配置

旋转的单位是角度：deg

transform过滤效果配置

8、animation动画

animation动画

animation属性

animation属性

animation属性

animation动画

代码

animation动画实现2

代码

animation实现旋转（转盘、时钟）

如有问题欢迎交流。

如转载请注明出处，谢谢！