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