1.css3选择器

  我们所定义的 CSS 属性之所以能应用到相应的节点上,就是因为 CSS 选择器模式。参考下述代码:

Body > .mainTabContainer  div  > span[5]{
Border: 1px solod red;
Background-color: white;
Cursor: pointer;
}

1. “body”标签直接子元素里 class 属性值为“mainTabContainer”的所有元素 A

2. A 的后代元素(descendant)里标签为 div 的所有元素 B

3. B 的直接子元素中的第 5 个标签为 span 的元素 C

这个 C 元素(可能为多个)即为选择器定位到的元素,如上的 CSS 属性也会全部应用到 C 元素上。

2.css3盒子模型

盒子模型为开发者提供了一种非常灵活的布局方式,但是支持这一特性的浏览器并不多,目前只有 webkit 内核的新版本 safari 和 chrome 以及 gecko 内核的新版本 firefox。

.boxcontainer {
width: 1000px;
display: -webkit-box;
display: -moz-box;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
} .item {
background: #357c96;
font-weight: bold;
margin: 2px;
padding: 20px;
color: #fff;
font-family: Arial, sans-serif;
}

3.CSS3 的 Transitions, Transforms 和 Animation Transitions

先说说 Transition,Transition 有下面些具体属性:

transition-property:用于指定过渡的性质,比如 transition-property:backgrond 就是指 backgound 参与这个过渡

transition-duration:用于指定这个过渡的持续时间

transition-delay:用于制定延迟过渡的时间

transition-timing-function:用于指定过渡类型,有 ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier

4.其他新属性

边框

border-color 属性
boder-image 属性
border-radius 属性
box-shadow 属性

背景

background-origin 属性和 background-clip 属性
background-size 属性
多重背景

颜色

HSL 颜色值
HSLA 颜色值
opacity 属性
RGBA 颜色值

文字效果

text-shadow 属性
text-overflow 属性
word-wrap 属性

用户界面

box-sizing 属性
resize 属性
outline 属性
nav-top、nav-right、nav-bottom、nav-left 属性

选择器

属性(attribute)选择器

基本盒模型

overflow-x 属性和 overflow-y 属性

生成的内容

content 属性

其它模块

media queries 模块
multi-column layout 模块
Web 字体模块
Speech 模块

css3新特性的更多相关文章

  1. 新特性AAtitti css3 新特性attilax总结titti css

    Atitti css3 新特性attilax总结 图片发光效果2 透明渐变效果2 文字描边2 背景拉伸2 CSS3 选择器(Selector)4 @Font-face 特性7 Word-wrap &a ...

  2. Atitti css3 新特性attilax总结

    Atitti css3 新特性attilax总结 图片发光效果2 透明渐变效果2 文字描边2 背景拉伸2 CSS3 选择器(Selector)4 @Font-face 特性7 Word-wrap &a ...

  3. CSS3新特性(阴影、动画、渐变、变形、伪元素等)

    CSS3与页面布局学习总结(六)--CSS3新特性(阴影.动画.渐变.变形.伪元素等)   目录 一.阴影 1.1.文字阴影 1.2.盒子阴影 二.背景 2.1.背景图像尺寸 2.2.背景图像显示的原 ...

  4. 深入了解css3新特性

    深入了解css3新特性:http://www.ibm.com/developerworks/cn/web/1202_zhouxiang_css3/

  5. H5 和 CSS3 新特性

    博客地址:https://ainyi.com/52 H5 新特性 语义化标签:header.footer.section.nav.aside.article 增强型表单:input 的多个 type ...

  6. css3新特性总结

    一.什么是css3 css用于控制网页的样式和布局,css3是css的升级版本,受浏览器限制,跨浏览器开发有点复杂.css3完全向后兼容 二.css3新特性 1.边框 css3的边框有如下属性: (1 ...

  7. 01-移动端开发教程-CSS3新特性

    1. 移动端开发课程概述 移动互联网的兴起,让移动端的开发迅速蹿红.对于前端开发者来说,移动端的开发已经占据了他们大部分工作时间.接下来老马带大家一起学习移动端开发的相关前端开发技术. 这边课程内容包 ...

  8. css css3新特性

    css  css3新特性 一.css3是什么? 我不喜欢把已有的概念从一个地方抄到另一个地方,还是喜欢如下方式. 参考百度百科: http://baike.baidu.com/link?url=z2V ...

  9. [转]深入了解 CSS3 新特性

    简介 CSS 即层叠样式表(Cascading Stylesheet).Web 开发中采用 CSS 技术,可以有效地控制页面的布局.字体.颜色.背景和其它效果.只需要一些简单的修改,就可以改变网页的外 ...

  10. css3新特性学习系列 -- border

    css3新特性 border属性(border-radius.border-image.box-shadow)详解 1.border-radius  圆角 支持:IE9+ 用法: border-rad ...

随机推荐

  1. 关于session和cookie

    一.cookie机制和session机制的区别 **************************************************************************** ...

  2. Python 爬虫2

    import urllib.request import os import re import time 设置头文件 head={} head['User-Agent'] ='Mozilla/5.0 ...

  3. Linux C 字符串函数 sprintf()、snprintf() 详解

    一.sprintf() 函数详解 在将各种类 型的数据构造成字符串时,sprintf 的强大功能很少会让你失望. 由于 sprintf 跟 printf 在用法上几乎一样,只是打印的目的地不同而已,前 ...

  4. sdcms留言提交

    引入这两个js <script src="{webroot}lib/validator/jquery.validator.js"></script>< ...

  5. (原)android的alertdialog中加入edittext但是不弹出软键盘等问题的解决与原因

    摘要:alertdialog中加入edittext但是不弹出软键盘等问题网上有很多不管用的解决方案, 本文意在给出更有效的解决办法,并初步探究其原因 正文 在对话框中插入文本框是十分常见的需求 通常我 ...

  6. Android模拟位置信息

    Android模拟位置程序,俗称GPS欺骗,只能修改采用GPS定位的软件. 手机定位方式目前有4种:基站定位,WIFI定位,GPS定位,AGPS定位 常见的修改手法: 1. 抓包欺骗法,抓包改包欺骗服 ...

  7. AngularJS ui-router (嵌套路由)

    http://www.oschina.net/translate/angularjs-ui-router-nested-routes AngularJS ui-router (嵌套路由) 英文原文:A ...

  8. java2

    1:关键字(掌握) (1)被Java语言赋予特定含义的单词 (2)特点: 全部小写. (3)注意事项: A:goto和const作为保留字存在. B:类似于Notepad++这样的高级记事本会对关键字 ...

  9. C#转义字符(Z)

    所有的ASCII码都可以用“\”加数字(一般是8进制数字)来表示.而C中定义了一些字母前加"\"来表示常见的那些不能显示的ASCII字符,如\0,\t,\n等,就称为转义字符,因为 ...

  10. js: 从setTimeout说事件循环模型

    一.从setTimeout说起 setTimeout()方法不是ecmascript规范定义的内容,而是属于BOM提供的功能.查看w3school对setTimeout()方法的定义,setTimeo ...