1、讓層在falsh上顯示

設(shè)置false的wmode值為transparent或opaque

<param name="wmode" value="transparent" />

2馋缅、點(diǎn)擊文字時(shí)也選中單選框或復(fù)選框

<input type="checkbox" id="chk1" name="chk" /><label for="chk1">選項(xiàng)</label>

3烦味、 @keyframes

指定動(dòng)畫名稱和動(dòng)畫效果

@keyframes names {
  from{opacity:1;}
  to{ opacity:0; }
}

@keyframes names1 {
  0%{color:#f00}
  40%{color:#333}
  100%{color:#999}
}

4礁鲁、animation

復(fù)合屬性箍铭。檢索或設(shè)置對(duì)象所應(yīng)用的動(dòng)畫特效

• animation-name： 動(dòng)畫名稱
• animation-duration： 動(dòng)畫的持續(xù)時(shí)間
• animation-timing-function： 過渡類型

linear: 線性過渡
ease: 平滑過渡
ease-in: 由慢到快
ease-out: 由快到慢
ease-in-out: 由慢到快再到慢
cubic-bezier(<number>, <number>, <number>, <number>)：特定的貝塞爾曲線類型，4個(gè)數(shù)值需在[0, 1]區(qū)間內(nèi)

• animation-delay: 動(dòng)畫延遲的時(shí)間
• animation-iteration-count: 動(dòng)畫的循環(huán)次數(shù)
• animation-direction: 動(dòng)畫在循環(huán)中是否反向運(yùn)動(dòng)

normal: 正常方向
alternate：正常與反向交替

• animation-play-state: 動(dòng)畫的狀態(tài)

running: 運(yùn)動(dòng)
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:

復(fù)合屬性杂曲。檢索或設(shè)置對(duì)象變換時(shí)的過渡

• tranisiton-property: 設(shè)置參與過渡的屬性

all: 所有可以進(jìn)行過渡的css屬性
none: 不指定過渡的css屬性
<property>：指定要進(jìn)行過渡的css屬性

• tranisition-duration: 設(shè)置過渡的持續(xù)時(shí)間
• transition-timing-function: 設(shè)置過渡的動(dòng)畫類型

linear: 線性過渡
ease: 平滑過渡
ease-in: 由慢到快
ease-out: 由快到慢
ease-in-out: 由慢到快再到慢
cubic-bezier(<number>, <number>, <number>, <number>)：特定的貝塞爾曲線類型庶艾，4個(gè)數(shù)值需在[0, 1]區(qū)間內(nèi)

• tranisition-delay: 設(shè)置延遲過渡的時(shí)間

例如：
縮寫方式：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轉(zhuǎn)換）

none：無轉(zhuǎn)換
matrix(<number>,<number>,<number>,<number>,<number>,<number>)：以一個(gè)含六值的(a,b,c,d,e,f)變換矩陣的形式指定一個(gè)2D變換擎勘，相當(dāng)于直接應(yīng)用一個(gè)[a,b,c,d,e,f]變換矩陣
translate(<length>[, <length>])：指定對(duì)象的2D translation（2D平移）咱揍。第一個(gè)參數(shù)對(duì)應(yīng)X軸，第二個(gè)參數(shù)對(duì)應(yīng)Y軸货抄。如果第二個(gè)參數(shù)未提供述召，則默認(rèn)值為0
translateX(<length>)：指定對(duì)象X軸（水平方向）的平移
translateY(<length>)：指定對(duì)象Y軸（垂直方向）的平移
rotate(<angle>)：指定對(duì)象的2D rotation（2D旋轉(zhuǎn)），需先有transform-origin屬性的定義
scale(<number>[, <number>])：指定對(duì)象的2D scale（2D縮放）蟹地。第一個(gè)參數(shù)對(duì)應(yīng)X軸积暖，第二個(gè)參數(shù)對(duì)應(yīng)Y軸。如果第二個(gè)參數(shù)未提供怪与，則默認(rèn)取第一個(gè)參數(shù)的值
scaleX(<number>)：指定對(duì)象X軸的（水平方向）縮放
scaleY(<number>)：指定對(duì)象Y軸的（垂直方向）縮放
skew(<angle> [, <angle>])：指定對(duì)象skew transformation（斜切扭曲）夺刑。第一個(gè)參數(shù)對(duì)應(yīng)X軸，第二個(gè)參數(shù)對(duì)應(yīng)Y軸分别。如果第二個(gè)參數(shù)未提供遍愿，則默認(rèn)值為0
skewX(<angle>)：指定對(duì)象X軸的（水平方向）扭曲
skewY(<angle>)：指定對(duì)象Y軸的（垂直方向）扭曲

示例：

transform:matrix(0,1,1,1,10,10) //矩陣變換
transform:rotate(-15deg) //旋轉(zhuǎn)
transform:translate(5%,10px) // 平移
transform:scale(.8) //縮放
transform:skew(-5deg) //扭曲

7、@media

指定樣式表規(guī)則用于指定的媒體類型和查詢條件耘斩，其中包括width（屏幕寬）沼填、height（屏幕高）、device-width（屏幕可見寬度）括授、device-height（屏幕可見高度）坞笙、orientation（頁面可見區(qū)域高度是否大于或等于寬度，如果是荚虚，則：orientation:portrait薛夜，否則，orientation:landscape）版述、aspect-ratio（頁面可見區(qū)域?qū)挾扰c高度的比率梯澜，比如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

提升指定樣式規(guī)則的應(yīng)用優(yōu)先權(quán)

div{color:#f00!important;color:#000;}
// 在上述代碼中，IE6及以下瀏覽器div的文本顏色為#000俭茧，!important并沒有覆蓋后面的規(guī)則咆疗；其它瀏覽器下div的文本顏色為#f00

div{color:#f00!important;}
div{color:#000;}
// 在上述代碼中，IE6及以下瀏覽器中div的文本顏色表現(xiàn)與其它瀏覽器一致恢恼，都為#f00

9、偽對(duì)象選擇符

• :first-letter/::first-letter ： 設(shè)置對(duì)象內(nèi)的第一個(gè)字符的樣式
• :first-line/::first-line ： 設(shè)置對(duì)象內(nèi)的第一行的樣式
• :before/::before： 設(shè)置在對(duì)象前（依據(jù)對(duì)象樹的邏輯結(jié)構(gòu)）發(fā)生的內(nèi)容胰默。用來和content屬性一起使用
• :after/::after ： 設(shè)置在對(duì)象后（依據(jù)對(duì)象樹的邏輯結(jié)構(gòu)）發(fā)生的內(nèi)容场斑。用來和content屬性一起使用
• ::selection ： 設(shè)置對(duì)象被選擇時(shí)的樣式

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 ： 匹配僅有一個(gè)子元素的E元素

<style>
li:only-child{color:#f00;}
</style>
<h1>只有唯一一個(gè)子元素</h1>
<ul>
    <li>結(jié)構(gòu)性偽類選擇符 E:only-child</li>
</ul>
<h1>有多個(gè)子元素</h1>
<ul>
    <li>結(jié)構(gòu)性偽類選擇符 E:only-child</li>
    <li>結(jié)構(gòu)性偽類選擇符 E:only-child</li>
    <li>結(jié)構(gòu)性偽類選擇符 E:only-child</li>
</ul>

• E:nth-last-child(n)： 匹配倒數(shù)第n個(gè)E元素
• E:first-of-type ： 匹配同類型中的第一個(gè)同級(jí)兄弟元素E

<style>
p:first-of-type{color:#f00;}
</style>
<div class="test">
    <div>我是一個(gè)div元素</div>
    <p>我是一個(gè)p元素</p>
    <p>我是一個(gè)p元素</p>
</div>

• E:last-of-type ： 匹配同類型中的最后一個(gè)同級(jí)兄弟元素E
• E:nth-of-type(n) ： 匹配同類型中的第n個(gè)同級(jí)兄弟元素E
• E:nth-last-of-type(n) ： 匹配同類型中的倒數(shù)第n個(gè)同級(jí)兄弟元素E
• E:only-of-type ： 匹配同類型中的唯一的一個(gè)同級(jí)兄弟元素E

<style>
p:only-of-type{color:#f00;}
</style>
<div class="test">
    <p>結(jié)構(gòu)性偽類選擇符 E:only-of-type</p>
</div>

• E:empty ： 匹配沒有任何子元素（包括text節(jié)點(diǎn)）的元素E

<style>
p:empty{height:25px;border:1px solid #ddd;background:#eee;}
</style>
<p>結(jié)構(gòu)性偽類選擇符 E:empty</p>
<p><!--我是一個(gè)空節(jié)點(diǎn)p，請(qǐng)注意我與其它非空節(jié)點(diǎn)p的外觀有什么不一樣--></p>
<p>結(jié)構(gòu)性偽類選擇符 E:empty</p>

• E:checked ： 匹配用戶界面上處于選中狀態(tài)的元素E漏隐。(用于input type為radio與checkbox時(shí))

<style>
input:checked+span{background:#f00;}
input:checked+span:after{content:" 我被選中了";}
</style>
<fieldset>
    <legend>選中下面的項(xiàng)試試</legend>
    <ul>
        <li><label><input type="radio" name="colour-group" value="0" /><span>藍(lán)色</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>選中下面的項(xiàng)試試</legend>
    <ul>
        <li><label><input type="checkbox" name="colour-group2" value="0" /><span>藍(lán)色</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： 度，一個(gè)圓360度
• grad： 梯度青责，一個(gè)圓400梯度
• rad： 弧度挺据，一個(gè)圓2π弧度
• turn： 轉(zhuǎn)，圈脖隶， 一個(gè)圓共1圈

90deg = 100grad = 0.25turn ≈ 1.570796326794897rad