css3
1、让层在falsh上显示
设置false的wmode值为transparent或opaque
<param name="wmode" value="transparent" />
2、点击文字时也选中单选框或复选框
<input type="checkbox" id="chk1" name="chk" /><label for="chk1">选项</label>
3、 @keyframes
指定动画名称和动画效果
@keyframes names {
from{opacity:1;}
to{ opacity:0; }
}
@keyframes names1 {
0%{color:#f00}
40%{color:#333}
100%{color:#999}
}
4、animation
复合属性。检索或设置对象所应用的动画特效
- animation-name： 动画名称
- animation-duration： 动画的持续时间
- animation-timing-function： 过渡类型
linear: 线性过渡
ease: 平滑过渡
ease-in: 由慢到快
ease-out: 由快到慢
ease-in-out: 由慢到快再到慢
cubic-bezier(<number>, <number>, <number>, <number>)：特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内
- animation-delay: 动画延迟的时间
- animation-iteration-count: 动画的循环次数
- animation-direction: 动画在循环中是否反向运动
normal: 正常方向
alternate：正常与反向交替
- animation-play-state: 动画的状态
running: 运动
paused: 暂停
.a1{
-webkit-transform:translate(60px);
-webkit-animation:animations 2s ease-out;
-moz-transform:translate(55px);
-moz-animation:animations 2s ease-out;
-o-transform:translate(55px);
-o-animation:animations 2s ease-out;
-ms-transform:translate(55px);
-ms-animation:animations 2s ease-out;
transform:translate(55px);
animation:animations 2s ease-out;
}
@-webkit-keyframes ..
@-moz-keyframes ..
@-o-keyframes ..
@-ms-keyframes ..
@keyframes animations{
0%{transform:translate(0);opacity:0;}
50%{transform:translate(30px);opacity:1;}
70%{transform:translate(35px);opacity:1;}
100%{transform:translate(60px);opacity:0;}
}
5、transition:
复合属性。检索或设置对象变换时的过渡
- tranisiton-property: 设置参与过渡的属性
all: 所有可以进行过渡的css属性
none: 不指定过渡的css属性
<property>：指定要进行过渡的css属性
- tranisition-duration: 设置过渡的持续时间
- transition-timing-function: 设置过渡的动画类型
linear: 线性过渡
ease: 平滑过渡
ease-in: 由慢到快
ease-out: 由快到慢
ease-in-out: 由慢到快再到慢
cubic-bezier(<number>, <number>, <number>, <number>)：特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内
- tranisition-delay: 设置延迟过渡的时间
例如：
缩写方式：transition:border-color .5s ease-in .1s, background-color .5s ease-in .1s, color .5s ease-in .1s;
拆分方式：
transition-property:border-color, background-color, color;
transition-duration:.5s, .5s, .5s;
transition-timing-function:ease-in, ease-in, ease-in;
transition-delay:.1s, .1s, .1s;
6、 transform（2D转换）
none：无转换
matrix(<number>,<number>,<number>,<number>,<number>,<number>)：以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换，相当于直接应用一个[a,b,c,d,e,f]变换矩阵
translate(<length>[, <length>])：指定对象的2D translation（2D平移）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0
translateX(<length>)：指定对象X轴（水平方向）的平移
translateY(<length>)：指定对象Y轴（垂直方向）的平移
rotate(<angle>)：指定对象的2D rotation（2D旋转），需先有transform-origin属性的定义
scale(<number>[, <number>])：指定对象的2D scale（2D缩放）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认取第一个参数的值
scaleX(<number>)：指定对象X轴的（水平方向）缩放
scaleY(<number>)：指定对象Y轴的（垂直方向）缩放
skew(<angle> [, <angle>])：指定对象skew transformation（斜切扭曲）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0
skewX(<angle>)：指定对象X轴的（水平方向）扭曲
skewY(<angle>)：指定对象Y轴的（垂直方向）扭曲
示例：
transform:matrix(0,1,1,1,10,10) //矩阵变换
transform:rotate(-15deg) //旋转
transform:translate(5%,10px) // 平移
transform:scale(.8) //缩放
transform:skew(-5deg) //扭曲
7、@media
指定样式表规则用于指定的媒体类型和查询条件，其中包括width（屏幕宽）、height（屏幕高）、device-width（屏幕可见宽度）、device-height（屏幕可见高度）、orientation（页面可见区域高度是否大于或等于宽度，如果是，则：orientation:portrait，否则，orientation:landscape）、aspect-ratio（页面可见区域宽度与高度的比率，比如aspect-ratio:1680/957）、device-aspect-ratio（屏幕可见宽度与高度的比率，如常讲的显示器屏幕比率：4/3, 16/9, 16/10）
@media screen and (max-width:800px){ … }
@import url(example.css) screen and (width:800px);
<link media="screen and (width:800px)" rel="stylesheet" href="example.css" />
<?xml-stylesheet media="screen and (width:800px)" rel="stylesheet" href="example.css" ?>
8、!important
提升指定样式规则的应用优先权
div{color:#f00!important;color:#000;}
// 在上述代码中，IE6及以下浏览器div的文本颜色为#000，!important并没有覆盖后面的规则；其它浏览器下div的文本颜色为#f00
div{color:#f00!important;}
div{color:#000;}
// 在上述代码中，IE6及以下浏览器中div的文本颜色表现与其它浏览器一致，都为#f00
9、伪对象选择符
- :first-letter/::first-letter ： 设置对象内的第一个字符的样式
- :first-line/::first-line ： 设置对象内的第一行的样式
- :before/::before： 设置在对象前（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用
- :after/::after ： 设置在对象后（依据对象树的逻辑结构）发生的内容。用来和content属性一起使用
- ::selection ： 设置对象被选择时的样式
10、伪类选择符
- E:not(s) ： 匹配不包含s的E元素
<style>
p:not(.abc){color:#f00;}
</style>
<p class="abc">否定伪类选择符 E:not()</p>
<p id="abc">否定伪类选择符 E:not()</p>
<p class="abcd">否定伪类选择符 E:not()</p>
<p>否定伪类选择符 E:not()</p>
- E:only-child ： 匹配仅有一个子元素的E元素
<style>
li:only-child{color:#f00;}
</style>
<h1>只有唯一一个子元素</h1>
<ul>
<li>结构性伪类选择符 E:only-child</li>
</ul>
<h1>有多个子元素</h1>
<ul>
<li>结构性伪类选择符 E:only-child</li>
<li>结构性伪类选择符 E:only-child</li>
<li>结构性伪类选择符 E:only-child</li>
</ul>
- E:nth-last-child(n)： 匹配倒数第n个E元素
- E:first-of-type ： 匹配同类型中的第一个同级兄弟元素E
<style>
p:first-of-type{color:#f00;}
</style>
<div class="test">
<div>我是一个div元素</div>
<p>我是一个p元素</p>
<p>我是一个p元素</p>
</div>
- E:last-of-type ： 匹配同类型中的最后一个同级兄弟元素E
- E:nth-of-type(n) ： 匹配同类型中的第n个同级兄弟元素E
- E:nth-last-of-type(n) ： 匹配同类型中的倒数第n个同级兄弟元素E
- E:only-of-type ： 匹配同类型中的唯一的一个同级兄弟元素E
<style>
p:only-of-type{color:#f00;}
</style>
<div class="test">
<p>结构性伪类选择符 E:only-of-type</p>
</div>
- E:empty ： 匹配没有任何子元素（包括text节点）的元素E
<style>
p:empty{height:25px;border:1px solid #ddd;background:#eee;}
</style>
<p>结构性伪类选择符 E:empty</p>
<p><!--我是一个空节点p，请注意我与其它非空节点p的外观有什么不一样--></p>
<p>结构性伪类选择符 E:empty</p>
- E:checked ： 匹配用户界面上处于选中状态的元素E。(用于input type为radio与checkbox时)
<style>
input:checked+span{background:#f00;}
input:checked+span:after{content:" 我被选中了";}
</style>
<fieldset>
<legend>选中下面的项试试</legend>
<ul>
<li><label><input type="radio" name="colour-group" value="0" /><span>蓝色</span></label></li>
<li><label><input type="radio" name="colour-group" value="1" /><span>红色</span></label></li>
<li><label><input type="radio" name="colour-group" value="2" /><span>黑色</span></label></li>
</ul>
</fieldset>
<fieldset>
<legend>选中下面的项试试</legend>
<ul>
<li><label><input type="checkbox" name="colour-group2" value="0" /><span>蓝色</span></label></li>
<li><label><input type="checkbox" name="colour-group2" value="1" /><span>红色</span></label></li>
<li><label><input type="checkbox" name="colour-group2" value="2" /><span>黑色</span></label></li>
</ul>
</fieldset>
11、角度（单位）
- deg： 度，一个圆360度
- grad： 梯度，一个圆400梯度
- rad： 弧度，一个圆2π弧度
- turn： 转，圈， 一个圆共1圈
90deg = 100grad = 0.25turn ≈ 1.570796326794897rad
