(整理中······)

一、选择器

新增的伪类

1、p:first-of-type   选择属于其父元素的首个 <p> 元素的每个 <p> 元素。

2、p:last-of-type   选择属于其父元素的最后 <p> 元素的每个 <p> 元素。

3、p:only-of-type   选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。

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

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

二、盒子模型

新增了边框属性:

1、border-radius

支持浏览器:IE9+、Firefox、Chrome、Safari 、Opera

2、box-shadow  向方框添加一个或多个阴影

支持浏览器:IE9+、Firefox、Chrome、Safari 、Opera

3、border-image

支持浏览器:Firefox(旧版本需要前缀-moz-)、Chrome(旧版本需要前缀-webkit-)、Safari(Safari 5 以及更老的版本需要前缀 -webkit-) 、Opera( 需要前缀 -o-)

三、背景

1、background-size   规定背景图片的尺寸

支持浏览器:IE9+、Firefox(旧版本需要前缀-moz-)、Chrome、Safari、Opera

2、background-origin    规定背景图片的定位区域,背景图片可以放置于 content-box、padding-box 或 border-box 区域。

支持浏览器:IE9+、Firefox、Chrome、Safari、Opera

3、background-clip   规定背景的绘制区域

支持浏览器:IE9+、Firefox、Chrome、Safari、Opera

四、文本效果

1、text-shadow   可向文本应用阴影

支持浏览器:IE10、Firefox、Chrome、Safari、Opera

2、word-wrap   允许文本强制文本进行换行 - 即使这意味着会对单词进行拆分

支持浏览器:所有主流浏览器

五、字体

@font-face

六、2D/3D转换

1、transform    向元素应用 2D 或 3D 转换

支持浏览器:

IE10:2D、3D都支持(2D IE9 需要前缀 -ms-);

Firefox:2D、3D都支持;

Chrome:2D、3D都支持(2D、3D需要前缀 -webkit-);

Safari:2D、3D都支持(2D、3D需要前缀 -webkit-);

Opera:只支持2D

2D转换方法:

3D转换方法:

2、transform-origin   允许你改变被转换元素的位置

七、过渡与动画

1、transition

支持浏览器:IE 10、Firefox、Chrome(Chrome 25 以及更早的版本,需要前缀 -webkit-)、Opera、Safari( 需要前缀 -webkit-)

2、@keyframes  用于创建动画。在 @keyframes 中规定某项 CSS 样式,就能创建由当前样式逐渐改为新样式的动画效果。

支持浏览器:IE 10、Firefox、Chrome(Chrome 25 以及更早的版本,需要前缀 -webkit-)、Opera、Safari( 需要前缀 -webkit-)

3、animation

支持浏览器:IE 10、Firefox、Chrome(Chrome 25 以及更早的版本,需要前缀 -webkit-)、Opera、Safari( 需要前缀 -webkit-)

八、多列布局

九、用户界面

CSS3中新增的内容的更多相关文章

  1. 妙味css3课程---1-2、css3中新增的伪类和伪元素有哪些

    妙味css3课程---1-2.css3中新增的伪类和伪元素有哪些 一.总结 一句话总结: 1.div:target{}是什么意思? 比如a标签的锚点链接到div,div:target{}就可以找到这个 ...

  2. css3中新增的样式使用方法

    在PC版开发中由于IE原因,我们很少用到css3,但随着平板和智能手机进入我们的生活,以及现在越来越流行,在手机版和平板版开发中我们就可以大胆的使用了,下面我们探讨常用几个css3属性: 1.css3 ...

  3. CSS3中新增的对文本和字体的设置

    文字阴影 text-shadow: 水平偏移 垂直偏移  模糊 颜色 兼容性:IE10+ <!DOCTYPE html> <html lang="en" mani ...

  4. css3新增属性有哪些?css3中常用的新增属性总结

    css3新增属性有哪些?来提问这个问题的人都应该知道css3是css的升级版本,那么,css3既然是升级版本,自然是会新增一些属性,接下来本篇文章将给大家介绍关于css3中常用的新增属性. 一.css ...

  5. CSS3中的弹性流体盒模型技术详解

    先回顾一下CSS1 和 CSS2中都已经定义了哪些布局方面的属性,这样也会增加我们理解弹性布局.   其实我们现在有很多一部分人,你们刚刚接触CSS层叠样式表,或者接触有一段时间了,但是却没有很好的去 ...

  6. css3中的布局相关样式

    web页面中的布局是指在页面中如何对标题.导航栏.主要内容.脚注.表单等各种构成要素进行合理编辑.在css3之前,主要使用float属性或position属性进行页面中的简单布局,但是也存在一些缺点, ...

  7. CSS3的新增边框属性

    一.CSS3 新增的边框属性 属性 版本 简介 border-image CSS3 设置或检索对象的边框使用图像来填充 border-image-source CSS3 设置或检索对象的边框是否用图像 ...

  8. html5--6-14 CSS3中的颜色表示方式

    html5--6-14 CSS3中的颜色表示方式 实例 每个参数 (red.green 以及 blue) 定义颜色的强度,可以是介于 0 与 255 之间的整数,或者是百分比值(从 0% 到 100% ...

  9. html5--6-13 CSS3中的颜色表示方式

    html5--6-13 CSS3中的颜色表示方式 学习要点 掌握选择器的优先级问题 掌握CSS3中新增的颜色表示方式 选择器的优先级问题 原则上:元素选择器<类选择器< ID选择器< ...

随机推荐

  1. SQL Server中的sysobjects

    摘自:http://www.cnblogs.com/bugY/archive/2011/09/21/2184182.html 关于SQL Server数据库的一切信息都保存在它的系统表格里.我怀疑你是 ...

  2. 计算(a/b)%c

    如果b与c互素,则(a/b)%c=a*b^(phi(c)-1)%c 如果b与c不互素,则(a/b)%c=(a%bc)/b 对于b与c互素和不互素都有(a/b)%c=(a%bc)/b成立

  3. android开发SD卡工具类(一)

    SD卡工具类整理: package com.gzcivil.utils; import java.io.File; import java.io.FileInputStream; import jav ...

  4. Android 开发中的View事件监听机制

    在开发过程中,我们常常根据实际的需要绘制自己的应用组件,那么定制自己的监听事件,及相应的处理方法是必要的.我们都知道Android中,事件的监听是基于回调机制的,比如常用的OnClick事件,你了解它 ...

  5. javaweb一周总结(菜鸟)

    我的试用期开始了. 这是我的第一篇博客,这也是我作为java工程师的第六天,主要是为了记录一周内出现的问题以及一些工作上的解答,吐槽一句工作的确和想的不一样之后直接记录下吧. 由于拥有工作平台看不到底 ...

  6. c++11: <thread>学习

    <thread>头文件中包含thread类与this_thread命名空间,下面逐一介绍. thread类 1. 构造函数 (1)默认构造函数 thread() noexcept; 默认构 ...

  7. Excel转JSON-简单-暴力-迅速

    一直在做一个关于网上选课的系统,选用了时下比较流行的node.js.今天在想怎么把学生或者老师的信息导入进去,涉及数量比较多一点,我手边又正好有一部分excel的表格.就想把excel转成json然后 ...

  8. 转:HTML 5 控件事件属性

    Window 事件属性 window 对象触发的事件. 适用于 <body> 标签: 属性 值 描述 onafterprint script 在打印文档之后运行脚本 onbeforepri ...

  9. linux下实现自己的shell解释器

    实现一个自己的shell解释器,其原理比较简单,首先获取用户的输入,通过fork()函数获取两个进程(父子进程),子进程通过execvp()函数继续进行,此时父进程一直在等待子进程的结束,待都结束了就 ...

  10. 动态加载Layout 与 论Activity、 Window、View的关系

    1)动态加载Layout的代码是 getWindow().setContentView(LayoutInflater.from(this).inflate(R.layout.main, null)); ...