CSS3中新增的内容

(整理中······)

一、选择器

新增的伪类

1、:first-of-type   选择属于其父元素的首个的X元素的每个X元素

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

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

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

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

二、盒子模型

新增了边框属性:

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-)

八、多列布局

九、用户界面

时间: 2024-10-10 10:05:54

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

css3中新增的一些有用的选择器

css3中新增呢很多新的玩意!有的东西玩着玩着就会被玩坏(呵呵,只是没什么用很鸡助),这来总结下我认为有用的, 不喜勿喷!有错误就请指出!绝对自己总结的,不当伸手党! 属性选择器: div[index]{background:red}    表示div下面带index属性的背景为红色 div[index=a]{background:red}  表示div下面的自定义属性index=a的div的颜色变成红色. div[index~=a]{background:red}    只要div中index

css3中新增的样式使用方法

在PC版开发中由于IE原因,我们很少用到css3,但随着平板和智能手机进入我们的生活,以及现在越来越流行,在手机版和平板版开发中我们就可以大胆的使用了,下面我们探讨常用几个css3属性: 1.css3前缀使用介绍,我们直接看个例子: Java代码   -webkit-transform:rotate(-3deg); // 给Chrome和Safari等webkit内核的浏览器使用 -moz-transform:rotate(-3deg);    // 给Firefox浏览器使用 -ms-tran

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

文字阴影 text-shadow: 水平偏移 垂直偏移  模糊 颜色 兼容性:IE10+ <!DOCTYPE html> <html lang="en" manifest="index.manifest"> <head> <meta charset="UTF-8"> <title>Document</title> <style> p{ color:blue; te

CSS3中新增属性总结

1 伪类选择器(用于选择子元素用的) table tr:nth-of-type(odd)  奇数行 table tr:nth-of-type(even) 偶数行 table tr:nth-child(odd) 奇数行 table tr:nth-child(even) 偶数行 效果如下: :nth-child(参数) 更加灵活 n+i:表示从第i行开始往后全部选中 i:表示只选中当前的第i行 2n/3n:表示选中2的倍数行 3的倍数行 所以:nth-child 用于选择子元素还是非常灵活 和方便的

CSS3中的弹性流体盒模型技术详解(一)

从这篇文章开始,会利用几个篇幅,我将跟大家分享 从CSS1到CSS3都是如何实现页面布局的(当然,所指的范畴是利用CSS技术). 由于盒子模型技术内容比较多,这篇文章我将着重讲解知识点. 下一篇文章,我会带领大家开发一个兼容 pc端浏览器和 移动端浏览器的弹性布局web界面的实例.希望大家能从中领受到CSS3在布局方面的强大功能. 好了,长话短说,现在开始我们的<CSS3中的弹性流体盒模型技术详解>之旅吧! 在讲解CSS3中新增的弹性布局属性之前,我们先回顾一下CSS1 和 CSS2中都已经定

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

先回顾一下CSS1 和 CSS2中都已经定义了哪些布局方面的属性,这样也会增加我们理解弹性布局. 其实我们现在有很多一部分人,你们刚刚接触CSS层叠样式表,或者接触有一段时间了,但是却没有很好的去消化与理解.可能平时你们还一直在使用table,然后通过不断了合并单元格来实现网页布局.希望我今天的这篇文章能彻底改变大家的观念. Q:如何理解盒子模型? A:大家可以想一想,在现实生活中,如果我们拿一个盒子来装东西,那么盒子里面的东西是不是跟这个盒子之间会有空隙呢?站在里面物品的角度,则它们之间的间隙

CSS3中的counter和content属性,一些简单的内容显示就不需要JS去实现了

HTML的代码 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

CSS3中的变形与动画【转】

最近在学习制作移动端的页面,做了一个微信页面的小demo,其中用到了很多的CSS3新增的内容,其中就有CSS3新增的变形和动画.其实这种CSS3的动画效果用JS也可以实现,不过CSS3能开启硬件加速,性能更好. (下面均没写浏览器前缀,如有需要请自行添加~~) CSS3常见的动画效果的实现,其实主要是靠 transition和 animation . 而通常,这两个又会和CSS3中的新属性transform 来搭配使用 那么这三个东西其实是干什么用的呢?我按我自己的理解来下个简单结论. tran

CSS3的新增属性及其用法

CSS3的新增属性及其用法 现如今,随着 Web2.0 技术的流行,之前的 CSS2 标准和相关技术似乎已经满足不了日益增长的开发需求:人们需要实现更加美观.用户体验更好的界面.CSS3,这个新一代的标准应运而生.为了满足现有的对于 Web UI 的开发需求,它提供了一系列强大的功能,如许多新的 CSS 属性(文字,布局,颜色等等),各种 CSS 特效,甚至还支持 CSS 动画.元素的变换.这些 CSS 新特性在现阶段可以说都是非常强大和完善的,您只需要加入几行简单的 CSS 代码便可以实现出一