CSS3中新增的内容
(整理中······)
一、选择器
新增的伪类
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中新增的内容的更多相关文章
- 妙味css3课程---1-2、css3中新增的伪类和伪元素有哪些
妙味css3课程---1-2.css3中新增的伪类和伪元素有哪些 一.总结 一句话总结: 1.div:target{}是什么意思? 比如a标签的锚点链接到div,div:target{}就可以找到这个 ...
- css3中新增的样式使用方法
在PC版开发中由于IE原因,我们很少用到css3,但随着平板和智能手机进入我们的生活,以及现在越来越流行,在手机版和平板版开发中我们就可以大胆的使用了,下面我们探讨常用几个css3属性: 1.css3 ...
- CSS3中新增的对文本和字体的设置
文字阴影 text-shadow: 水平偏移 垂直偏移 模糊 颜色 兼容性:IE10+ <!DOCTYPE html> <html lang="en" mani ...
- css3新增属性有哪些?css3中常用的新增属性总结
css3新增属性有哪些?来提问这个问题的人都应该知道css3是css的升级版本,那么,css3既然是升级版本,自然是会新增一些属性,接下来本篇文章将给大家介绍关于css3中常用的新增属性. 一.css ...
- CSS3中的弹性流体盒模型技术详解
先回顾一下CSS1 和 CSS2中都已经定义了哪些布局方面的属性,这样也会增加我们理解弹性布局. 其实我们现在有很多一部分人,你们刚刚接触CSS层叠样式表,或者接触有一段时间了,但是却没有很好的去 ...
- css3中的布局相关样式
web页面中的布局是指在页面中如何对标题.导航栏.主要内容.脚注.表单等各种构成要素进行合理编辑.在css3之前,主要使用float属性或position属性进行页面中的简单布局,但是也存在一些缺点, ...
- CSS3的新增边框属性
一.CSS3 新增的边框属性 属性 版本 简介 border-image CSS3 设置或检索对象的边框使用图像来填充 border-image-source CSS3 设置或检索对象的边框是否用图像 ...
- html5--6-14 CSS3中的颜色表示方式
html5--6-14 CSS3中的颜色表示方式 实例 每个参数 (red.green 以及 blue) 定义颜色的强度,可以是介于 0 与 255 之间的整数,或者是百分比值(从 0% 到 100% ...
- html5--6-13 CSS3中的颜色表示方式
html5--6-13 CSS3中的颜色表示方式 学习要点 掌握选择器的优先级问题 掌握CSS3中新增的颜色表示方式 选择器的优先级问题 原则上:元素选择器<类选择器< ID选择器< ...
随机推荐
- SQL Server中的sysobjects
摘自:http://www.cnblogs.com/bugY/archive/2011/09/21/2184182.html 关于SQL Server数据库的一切信息都保存在它的系统表格里.我怀疑你是 ...
- 计算(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成立
- android开发SD卡工具类(一)
SD卡工具类整理: package com.gzcivil.utils; import java.io.File; import java.io.FileInputStream; import jav ...
- Android 开发中的View事件监听机制
在开发过程中,我们常常根据实际的需要绘制自己的应用组件,那么定制自己的监听事件,及相应的处理方法是必要的.我们都知道Android中,事件的监听是基于回调机制的,比如常用的OnClick事件,你了解它 ...
- javaweb一周总结(菜鸟)
我的试用期开始了. 这是我的第一篇博客,这也是我作为java工程师的第六天,主要是为了记录一周内出现的问题以及一些工作上的解答,吐槽一句工作的确和想的不一样之后直接记录下吧. 由于拥有工作平台看不到底 ...
- c++11: <thread>学习
<thread>头文件中包含thread类与this_thread命名空间,下面逐一介绍. thread类 1. 构造函数 (1)默认构造函数 thread() noexcept; 默认构 ...
- Excel转JSON-简单-暴力-迅速
一直在做一个关于网上选课的系统,选用了时下比较流行的node.js.今天在想怎么把学生或者老师的信息导入进去,涉及数量比较多一点,我手边又正好有一部分excel的表格.就想把excel转成json然后 ...
- 转:HTML 5 控件事件属性
Window 事件属性 window 对象触发的事件. 适用于 <body> 标签: 属性 值 描述 onafterprint script 在打印文档之后运行脚本 onbeforepri ...
- linux下实现自己的shell解释器
实现一个自己的shell解释器,其原理比较简单,首先获取用户的输入,通过fork()函数获取两个进程(父子进程),子进程通过execvp()函数继续进行,此时父进程一直在等待子进程的结束,待都结束了就 ...
- 动态加载Layout 与 论Activity、 Window、View的关系
1)动态加载Layout的代码是 getWindow().setContentView(LayoutInflater.from(this).inflate(R.layout.main, null)); ...