扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
这些css3的样式需要加
创新互联建站主营锦江网站建设的网络公司,主营网站建设方案,app开发定制,锦江h5小程序开发搭建,锦江网站营销推广欢迎锦江等地区企业咨询
这些css3的样式加上以后 会使得页面变的极为绚丽
使人流连忘返
一、新增的选择器
CSS3新增的属性选择器 {除ie6外的大部分浏览器支持）
1 E[att^="val"] 属性att的值以"val"开头的元素 div[id^="nav"] { background:#ff0; }
2 E[att$="val"] 属性att的值以"val"结尾的元素
3 E[att*="val"] 属性att的值包含"val"字符串的元素
结构伪类选择器（过滤选择器）
(注：FireFox 1.5/2.0/3.0支持E:root，FireFox 3.0支持E:last-child、E:only-child、E:empty。
由于IE6/7/8不支持，没办法，选择合适的场合用吧。)
4 E:root 匹配文档的根元素，对于HTML文档，就是HTML元素
5 E:nth-child(n) 匹配其父元素的第n个子元素，第一个编号为1 p:nth-child(3) { color:#f00; }
6 E:nth-last-child(n) 匹配其父元素的倒数第n个子元素，第一个编号为1 p:last-child { background:#ff0; }
7 E:nth-of-type(n) 与:nth-child()作用类似，但是仅匹配使用同种标签的元素 p:nth-of-type(2){color:red;}选择父元素的第n个子元素p
8 E:nth-last-of-type(n) 与:nth-last-child() 作用类似，但是仅匹配使用同种标签的元素
9 E:last-child 匹配父元素的最后一个子元素，等同于:nth-last-child(1)
10 E:first-of-type 匹配父元素下使用同种标签的第一个子元素，等同于:nth-of-type(1)
11 E:last-of-type 匹配父元素下使用同种标签的最后一个子元素，等同于:nth-last-of-type(1)
12 E:only-child 匹配父元素下仅有的一个子元素，等同于:first-child:last-child或 :nth-child(1):nth-last-child(1) p:only-child { background:#ff0; }
13 E:only-of-type 匹配父元素下使用同种标签的唯一一个子元素，等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1)
14 E:empty 匹配一个不包含任何子元素的元素，注意，文本节点也被看作子元素 p:empty { background:#ff0; }
与用户界面(UI)有关的伪类(ie6 7 8不支持)
15 E:enabled 匹配表单中激活的元素
16 E:disabled 匹配表单中禁用的元素 input[type="text"]:disabled { background:#ddd; }
17 E:checked 匹配表单中被选中的radio（单选框）或checkbox（复选框）元素
18 E::selection 匹配用户当前选中的元素
级元素通用选择器
ie6不支持
19 E ~ F 匹配任何在E元素之后的同级F元素 p ~ ul { background:#ff0; }
反选伪类
(ie6 7 8 firefox3.0以下 Opera9.0不支持)
20 E:not(s) 匹配不符合当前选择器的任何元素 :not(p) { border:1px solid #ccc; }
:target 伪类
(ie6 7 8不支持)
21 E:target 匹配文档中特定"id"点击后的效果
二、css3新增属性
一. box-shadow(阴影效果)
使用:
box-shadow: 20px 10px 0 #000;
-moz-box-shadow: 20px 10px 0 #000;
-webkit-box-shadow: 20px 10px 0 #000;
支持:
FF3.5, Safari 4, Chrome 3
二. border-colors(为边框设置多种颜色)
使用:
border: 10px solid #000;
-moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
说明:
颜色值数量不固定, 且FF的私有写法不支持缩写: -moz-border-colors: #333 #444 #555;
支持:
FF3+
三. boder-image(图片边框)
使用:
-moz-border-image: url(exam.png) 20 20 20 20 repeat;
-webkit-border-image: url(exam.png) 20 20 20 20 repeat;
说明:
(1). 20 20 20 20 --- 边框的宽度, 分别对应top, right, bottom, left边框, 改变宽度可以实现不同的效果;
(2). 边框图片效果(目前仅实现了两种):
repeat --- 边框图片会平铺, 类似于背景重复;
stretch --- 边框图片会以拉伸的方式来铺满整个边框;
(3). 必须将元素的边框厚度设置为非0非auto值.
支持:
FF 3.5, Safari 4, Chrome 3
四. text-shadow(文本阴影)
使用:
text-shadow: [颜色水平偏移纵向偏移模糊半径] || [水平偏移纵向偏移模糊半径颜色];
说明:
(1) 颜色和模糊半径是可选的, 当颜色未指定时, 将使用文本颜色; 当模糊半径未指定时, 半径值为0;
(2) shadow可以是逗号分隔的列表, 如:
text-shadow: 2px 2px 2px #ccc, 3px 3px 3px #ddd;
(3) 阴影效果会按照shadow list中指定的顺序应用到元素上;
(4) 这些阴影效果有可能相互重叠, 但不会叠加文本本身;
(5) 阴影可能会跑到容器的边界之外, 但不会影响容器的大小.
支持:
FF 3.5, Opera 10, Safari 4, Chrome 3
五. text-overflow(文本截断)
使用:
text-overflow: inherit | ellipsis | clip ;
-o-text-overflow: inherit | ellipsis | clip;
说明:
(1) 还有一个属性ellipsis-word, 但各浏览器均不支持.
支持:
IE6+, Safari4, Chrome3, Opera10
六. word-wrap(自动换行)
使用:
word-wrap: normal | break-word;
支持:
IE6+, FF 3.5, Safari 4, Chrome 3
七. border-radius(圆角边框)
使用:
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
支持:
FF 3+, Safari 4 , Chrome 3
八. opacity(不透明度)
使用:
opacity: 0.5;
filter: alpha(opacity=50); /* for IE6, 7 */
-ms-filter(opacity=50); /* for IE8 */
支持:
all
九. box-sizing(控制盒模型的组成模式)
使用:
box-sizing: content-box | border-box; // for opera
-moz-box-sizing: content-box | border-box;
-webkit-box-sizing: content-box | border-box;
说明:
1. content-box:
使用此值时, 盒模型的组成模式是, 元素宽度 = content + padding + border;
2. border-box:
使用此值时, 盒模型的组成模式是, 元素宽度 = content(即使设置了padding和border, 元素的宽度
也不会变).
支持:
FF3+, Opera 10, Safari 4, Chrome 3
十. resize(元素缩放)
使用:
resize: none | both | horizontal | vertical;
说明:
1. 必须将元素的overflow属性设置为auto或hidden, 该属性才能起作用(overflow设置为visible时, 无效);
2. 属性值说明:
(1). none -- 禁用缩放;
(2). both -- 可同时缩放宽度和高度;
(3). horizontal -- 仅能缩放宽度;
(4). vertical -- 仅能缩放高度;
支持:
safari 4, chrome 3
十一. outline(外边框)
使用:
outline: 边框厚度 边框样式 边框颜色;
outline-offset: 偏移值;
说明:
outline-offset需要独立写, 简写是无效的.
支持:
FF3+, safari 4, chrome 3, opera 10
十二. background-size(指定背景图片的尺寸)
使用:
-o-background-size: [length | percentage] {1, 2};
-webkit-background-size: [length | percentage] {1, 2};
例如:
-o-background-size: 50px 60px;
-webkit-background-size: 50px 60px;
这会将背景图片的宽设置了50px, 高60px.
支持:
safari 4, chrome 3, opera 10
十三. background-origin(指定背景图片从哪里开始显示)
使用:
-webkit-background-origin: border | padding | content;
-moz-background-origin: border | padding | content;
说明:
(1) border -- 从border区域开始显示背景;
(2) padding -- 从padding区域开始显示背景;
(3) content -- 从content区域开始显示背景;
注意:
1. 必须先指定background属性, 然后才能指定该属性, 如果该属性出现在background属性之前,
会无效.
支持:
safari 4, chrome 3, FF 3+
十四. background-clip(指定背景图片从什么位置开始裁切)
使用:
-webkit-background-origin: border-box | padding-box | content-box | no-clip;
说明:
(1) border-box -- 从border区域向外裁剪背景;
(2) padding-box -- 从padding区域向外裁剪背景;
(3) content-box -- 从content区域向外裁剪背景;
(4) no-clip -- 不裁切背景.
注意:
1. 必须先指定background属性, 然后才能指定该属性, 如果该属性出现在background属性之前,
会无效.
支持:
safari 4, chrome 3
十五. background(为一个元素指定多个背景)
使用:
background: [background-image] | [background-origin] | [background-clip] | [background-repeat] | [background-size] | [background-position]
例子:
background: url(bg1.png) no-repeat left top, url(bg2.png) no-repeat right bottom;
支持:
safari 4, chrome 3
十六. hsl(通过色调, 饱和度, 亮度来指定颜色值)
使用:
hsl: ( length || percentage || percentage);
说明:
(1) length: h(色调), 0(或360)表示红色, 120表示绿色, 240表示蓝色;
(2) percentage: s(饱和度), 取值为0%到100%之间的值;
(3) percentage: l(亮度), 取值为0%到100%之间的值;
例子:
background: hsl(240, 50%, 100%);
color: hsl(100, 80, 100%);
支持:
safari 4, chrome 3, FF3, opera 10
十七. hsla(在hsl的基础上上增加了一个透明度设置)
使用:
hsla: ( length || percentage || percentage || opacity);
说明:
(1) opacity: a(透明度), 取值在0到1之间;
例子:
background: hsl(240, 50%, 100%, 0.5);
color: hsl(240, 50%, 100%, 0.5);
支持:
safari 4, chrome 3, FF3, opera 10
十八. rgba(基于r,g,b三个颜色通道来设置颜色值, 通过a来设置透明度)
使用:
rgba: (r, g, b, opacity);
说明:
(1) r: 红色, 正整数 | 百分数;
(2) g: 绿色, 正整数 | 百分数;
(3) b: 蓝色, 正整数 | 百分数;
(4) a: 透明度, 取值在0到1之间;
(5) 正整数在0到255之间, 百分数在0%到100%之间.
例子:
rgba: (100%, 244, 0, 0.5);
支持:
safari 4, chrome 3, FF3, opera 10
十九、 transition（a标签hover渐隐效果）
a:hover{transition: color 0.15s linear 0s, background-color 0.3s linear 0s;}
-webkit-transition:color 0.15s linear 0s, background-color 0.3s linear 0s;
-moz-transition:color 0.15s linear 0s, background-color 0.3s linear 0s;
-o-transition:color 0.15s linear 0s, background-color 0.3s linear 0s;
-ms-transition:color 0.15s linear 0s, background-color 0.3s linear 0s;
transition:color 0.15s linear 0s, background-color 0.3s linear 0s;
一、 h5是html的最新版本，是14年由w3c完成标准制定。增强了，浏览器的原生功能，减少浏览器插件（eg：flash）的应用，提高用户体验满意度，让开发更加方便。
- h5新增的标签：
video ： 表示一段视频并提供播放的用户界面
audio ： 表示音频
canvas： 表示位图区域
source： 为video和audio提供数据源
track ： 为video和audio指定字母
svg： 定义矢量图
code： 代码段
figure ： 和文档有关的图例
figcaption ： 图例的说明
time： 日期和时间值
mark： 高亮的引用文字
datalist ： 提供给其他控件的预定义选项
keyge： 秘钥对生成器控件
output ： 计算值
rogress ： 进度条
menu： 菜单
embed： 嵌入的外部资源
menuitem： 用户可点击的菜单项
menu： 菜单
二、 css3被划分为模块，最重要的几个模块包括：选择器、框模型、背景和边框、文本效果、2D/3D 转换、动画、多列布局、用户界面。
新增属性：
选择器
框模型
背景和边框
border-radius、box-shadow、border-image、
background-size：规定背景图片的尺寸
background-origin：规定背景图片的定位区域
background-clip：规定背景的绘制区域
文本效果（常用）
text-shadow：设置文字阴影
word-wrap：强制换行
word-break
css3提出@font-face规则，规则中定义了font-family、font-weight、font-style、font-stretch、src、unicode-range
2/3D转换
transform：向元素应用2/3D转换
transition：过渡
动画
@keyframes规则：
animation、animation-name、animation-duration等
用户界面（常用）
box-sizing、resize
css3新增伪类
：nth-child()
：nth-last-child()
：only-child
：last-child
：nth-of-type()
：only-of-type()
：empty
：target 这个伪类允许我们选择基于URL的元素，如果这个元素有一个识别器（比如跟着一个#），那么:target会对使用这个ID识别器的元素增加样式。
：enabled
：disabled
：checked
：not
个人总结css3.0增加了选择器的书写语法，有学过jquery的会发现跟jquery的选择器语法很像，另外css3.0增加了一些属性（如圆角、渐变、盒模型等）和单位（如角度）。
如果你说的是第一次不执行动画的话。那么问题就是第一次加在不到是你第一次是append在文档后面添加div，你第一次操作div不存在，当你添加出div，因为div是直接被显示出来，而你的open类是执行动画，你添加出div你的div是显示的，open类也是执行动画显示div，div已经显示出来了所以不会执行动画，而你后面的能执行因为div已经存在，他能正确的执行动画。如果要正确就是div直接写出来不要用js返回，或者用js去操作动画。我所理解的是这样，不知道对你有帮助不。
h5是html的最新版本，是14年由w3c完成标准制定。增强了，浏览器的原生功能，减少浏览器插件（eg：flash）的应用，提高用户体验满意度，让开发更加方便。
- h5新增的标签
新增元素
说明
video 表示一段视频并提供播放的用户界面
audio 表示音频
canvas 表示位图区域
source 为video和audio提供数据源
track 为video和audio指定字母
svg 定义矢量图
code 代码段
figure 和文档有关的图例
figcaption 图例的说明
main
time 日期和时间值
mark 高亮的引用文字
datalist 提供给其他控件的预定义选项
keygen 秘钥对生成器控件
output 计算值
progress 进度条
menu 菜单
embed 嵌入的外部资源
menuitem 用户可点击的菜单项
menu 菜单
template
section
nav
aside
article
footer
header
- css3
css3被划分为模块，最重要的几个模块包括：选择器、框模型、背景和边框、文本效果、2D/3D 转换、动画、多列布局、用户界面
选择器
框模型
背景和边框
border-radius、box-shadow、border-image、
background-size：规定背景图片的尺寸
background-origin：规定背景图片的定位区域
background-clip：规定背景的绘制区域
文本效果（常用）
text-shadow：设置文字阴影
word-wrap：强制换行
word-break
css3提出@font-face规则，规则中定义了font-family、font-weight、font-style、font-stretch、src、unicode-range
2/3D转换
transform：向元素应用2/3D转换
transition：过渡
动画
@keyframes规则：
animation、animation-name、animation-duration等
用户界面（常用）
box-sizing、resize
css3新增伪类
：nth-child()
：nth-last-child()
：only-child
：last-child
：nth-of-type()
：only-of-type()
：empty
：target 这个伪类允许我们选择基于URL的元素，如果这个元素有一个识别器（比如跟着一个#），那么:target会对使用这个ID识别器的元素增加样式。
：enabled
：disabled
：checked
：not
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
微信二维码
移动版官网