码迷,mamicode.com
首页 > Web开发 > 详细

CSS3中新增的内容

时间:2018-01-09 20:14:29      阅读:185      评论:0      收藏:0      [点我收藏+]

标签:一个   背景   body   界面   nbsp   浏览器   pos   only   效果   

(整理中······)

一、选择器

新增的伪类

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中新增的内容

标签:一个   背景   body   界面   nbsp   浏览器   pos   only   效果   

原文地址:https://www.cnblogs.com/-sayaa/p/8252799.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
分享档案
周排行
mamicode.com排行更多图片
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!