css3新特性
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新特性的更多相关文章
- 新特性AAtitti css3 新特性attilax总结titti css
Atitti css3 新特性attilax总结 图片发光效果2 透明渐变效果2 文字描边2 背景拉伸2 CSS3 选择器(Selector)4 @Font-face 特性7 Word-wrap &a ...
- Atitti css3 新特性attilax总结
Atitti css3 新特性attilax总结 图片发光效果2 透明渐变效果2 文字描边2 背景拉伸2 CSS3 选择器(Selector)4 @Font-face 特性7 Word-wrap &a ...
- CSS3新特性(阴影、动画、渐变、变形、伪元素等)
CSS3与页面布局学习总结(六)--CSS3新特性(阴影.动画.渐变.变形.伪元素等) 目录 一.阴影 1.1.文字阴影 1.2.盒子阴影 二.背景 2.1.背景图像尺寸 2.2.背景图像显示的原 ...
- 深入了解css3新特性
深入了解css3新特性:http://www.ibm.com/developerworks/cn/web/1202_zhouxiang_css3/
- H5 和 CSS3 新特性
博客地址:https://ainyi.com/52 H5 新特性 语义化标签:header.footer.section.nav.aside.article 增强型表单:input 的多个 type ...
- css3新特性总结
一.什么是css3 css用于控制网页的样式和布局,css3是css的升级版本,受浏览器限制,跨浏览器开发有点复杂.css3完全向后兼容 二.css3新特性 1.边框 css3的边框有如下属性: (1 ...
- 01-移动端开发教程-CSS3新特性
1. 移动端开发课程概述 移动互联网的兴起,让移动端的开发迅速蹿红.对于前端开发者来说,移动端的开发已经占据了他们大部分工作时间.接下来老马带大家一起学习移动端开发的相关前端开发技术. 这边课程内容包 ...
- css css3新特性
css css3新特性 一.css3是什么? 我不喜欢把已有的概念从一个地方抄到另一个地方,还是喜欢如下方式. 参考百度百科: http://baike.baidu.com/link?url=z2V ...
- [转]深入了解 CSS3 新特性
简介 CSS 即层叠样式表(Cascading Stylesheet).Web 开发中采用 CSS 技术,可以有效地控制页面的布局.字体.颜色.背景和其它效果.只需要一些简单的修改,就可以改变网页的外 ...
- css3新特性学习系列 -- border
css3新特性 border属性(border-radius.border-image.box-shadow)详解 1.border-radius 圆角 支持:IE9+ 用法: border-rad ...
随机推荐
- Sql Server FOR XML PATH
FOR XML PATH 有的人可能知道有的人可能不知道,其实它就是将查询结果集以XML形式展现,有了它我们可以简化我们的查询语句实现一些以前可能需要借助函数活存储过程来完成的工作.那么以一个实例为主 ...
- Android studio 相关错误处理
1.android:theme="@android:style/Theme.Black.NoTitleBar.Fullscreen" --> 在Activity中设置,表 ...
- 1、Jsp页面
一.JSP(java server page):是以Java语言为基础的动态网页生成技术. 1.特点: a).以 .jsp 为后缀的文本文件,不需要编译(相对于程序猿来说不需要编译) b).以html ...
- 【强烈推荐】如何给TortoiseGit 配置密钥?
TortoiseGit 使用扩展名为ppk的密钥,而不是ssh-keygen生成的rsa密钥.也就是说使用 ssh-keygen -C "username@email.com" - ...
- 浏览器兼容innerText nextElementSibling firstElementChild
//下面是封装的方法,可以直接使用 //获dom对象的innerText的取值 function getInnerText(element){ //判断浏览器是否支持innerText if(type ...
- PL/SQL Developer 连接 64位Oracle 服务端 解决方案
PL/SQL是32位程序,只能通过32位的Oracle驱动连接Oracle服务器.如果Oracle服务器是64位的,那么只能通过需要通过一个32位的Oracle客户端,来搭建连接. 到官网下载一个客户 ...
- and or bool and a or b 原理解释
python 中的and从左到右计算表达式,若所有值均为真,则返回最后一个值,若存在假,返回第一个假值. or也是从左到有计算表达式,返回第一个为真的值. 代码如下: IDLE 1.2.4>&g ...
- LINUX DNS解析的3种修改方法~
1.HOST 本地DNS解析 vi /etc/hosts 添加规则 例如: 223.231.234.33 www.baidu.com 2.网卡配置文件DNS服务地址 vi /etc/sysconfi ...
- WIN7下VS2008生成Detours3.0
Detours是微软开发的一个函数库,可用于捕获系统API.在用其进行程序开发之前,得做一些准备工作: 一.下载Detours 在http://research.microsoft.com ...
- SQL的ROW_NUMBER函数
with tabs as ( select ROW_NUMBER() over(partition by customerID order by totalPrice) as rows,custome ...