CSS3新增加使用的特性

CSS3新出的特性

1.圆角效果  =>border-radius

2.图形化边界   background-img ,repeat,size,position,origin,clip  =>背景图片处理 页面背景设计

3.块阴影与文字阴影 盒子阴影box-shadow text-shadow 前三个是像素宽度 四个是颜色

4.使用RGBA实现透明效果  =>web 颜色设计 元素色彩  看看web安全色设置

5.渐变效果

6.使用Font-Face实现定制字体  是链接服务器字体的方式，嵌入到浏览器的安全字体，不用担心用户在无字体正常显示问题

7.多背景图

8.文字或图像的变形处理（旋转、缩放、倾斜、移动）

9.多栏布局

10.媒体查询  为不同分辨率的设备定义不同的样式  可视化区域实现js判断浏览器分辨率

11.多列布局与弹性盒模型布局 灵活  ：像报纸、杂志一样将区块拆成多列。实现列数、列宽、各列的空白间距

弹性布局 根据前端分辨率进行弹性布局 实现页面区块在水平、垂直方向对齐，响应式开发必备 ，和rem布局

12.过渡与动画  transition 属性设定某元素 某段时间变化的简单动画效果 ，达到效果具有流线性与平滑性

animation属性 实现复杂样式变化以及交互效果，页面元素动起来，从静到动的变化 ，不适用Flash或js脚本代码

13.选择器

基本选择器 => 子 相邻兄弟 通用兄弟 群组

属性选择器  element=> [attribute]  => [attribute='value'] => [attribute~='value'] =>[attribute*='value']=>[attribute^='value']=>[attribute$='value']

伪类选择器 动态伪类

锚点伪类 => :link=> :visited 用户和网站交互

用户行为伪类 => :hover => :active => :focus

目标伪类  =>:target 点击锚点 id元素显示视口

checked状态伪类 宽高 appearance:none 清除input默认样式

14.css3结构类：nth选择器 :first-child/last-child=>:nth-child(n) odd,even=>:nth-last-child(n)=>:nth-of-type(n)=>:first-of-type/:last-of-type=>:only-child=>:only-of-type=>empty

否定选择器:not

伪元素与元素区别：无法通过js获取DOM，无法通过浏览器开发者工具查看，伪元素默认inline

使用伪元素：before,after必须设置content =>显示背景图，使用display为块元素 =>设置display:inline0block 需要再设置vertical-align:middle