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:last-of-type 选择属于其父元素的最后

元素的每个

元素。
p:only-of-type 选择属于其父元素唯一的

元素的每个

元素。
p:only-child 选择属于其父元素的唯一子元素的每个

元素。 p:nth-child(2) 选择属于其父元素的第二个子元素的每个

元素。 :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新标签, 浏览器支持新标签后,还需要添加标签默认的样式:

 

你可能感兴趣的:(css3和H5 新特性)