css3和H5 新特性

css3:

css3选择器：属性选择器，伪类选择器，伪元素选择器

css3新特性：

1、边框属性：

      border-radius：圆角

      border-shadow:给边框加阴影     border-show(水平阴影的位置，垂直阴影的位置，阴影的模糊度，阴影的颜色)例子： border-shadow(10px,10px,5px,red);

     border-image:加图片的边框

2、背景：

  background-size 属性规定背景图片的尺寸。

background-origin 属性规定背景图片的定位区域。

3、文本效果：

   text-shadow:给文字加阴影

h1{
  	text-shadow: 10px 10px 10px #FF0000;
}

 word-wrap:自动换行

4、css2D转换 

transform：

• translate()：通过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数
• rotate()：通过 rotate() 方法，元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。例子：transform:rotate(30deg);
• scale():通过 scale() 方法，元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数：
• skew():通过 skew() 方法，元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数.例子：值 skew(30deg,20deg) 围绕 X 轴把元素翻转 30 度，围绕 Y 轴翻转 20 度
• matrix()：

  matrix() 方法把所有 2D 转换方法组合在一起。

  matrix() 方法需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素

      transform:matrix(0.866,0.5,-0.5,0.866,0,0);

  css3D转换：

5、transition过渡

6、动画 @keyframes规则

请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。

0% 是动画的开始，100% 是动画的完成。

 

CSS3新增伪类有那些？

p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。
p:last-of-type 选择属于其父元素的最后 <p> 元素的每个 <p> 元素。
p:only-of-type 选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。
p:only-child 选择属于其父元素的唯一子元素的每个 <p> 元素。 p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <p> 元素。 :enabled、:disabled 控制表单控件的禁用状态。
:checked，单选框或复选框被选中。html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？

H5新特性：

1. 拖拽释放(Drag and drop) API
2. 语义化更好的内容标签（header,nav,footer,aside,article,section）
3. 音频、视频API(audio,video)
4. 画布(Canvas) API
5. 地理(Geolocation) API
6. 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；
7. sessionStorage 的数据在浏览器关闭后自动删除
8. 表单控件，calendar、date、time、email、url、search
9. 新的技术webworker, websocket, Geolocation支持HTML5新标签：

IE8/IE7/IE6支持通过document.createElement方法产生的标签， 可以利用这一特性让这些浏览器支持HTML5新标签， 浏览器支持新标签后，还需要添加标签默认的样式：