『HTML 5モバイル開発ガイド』——ノート6(CSS 3新特性)

CSS 3技術はモバイルWeb開発において最も適した特性:

強化セレクタ

シャドウ

強力なバックグラウンド設定

フィレットボーダー

1.セレクタ
1.1属性セレクタ(4種類に分類)

完全一致属性セレクタ

<div id="article"></div>
<style>
[id=article] {
     color:#000;
}
</style><strong>
</strong>

は、マッチングセレクタ

を含む.
構文:[attribute*=value]attributeは属性名、valueは属性値

<div id="article">1</div>
<div id="subarticle">2</div>
<div id="article1">3</div>
<style>
[id*=article] {
     color:red;
}
</style>

ヘッダマッチングセレクタ

<div id="article">1</div>
<div id="subarticle">2</div>
<div id="article1">3</div>
<style>
[id^=article] {
     color:red;
}
</style>

末尾文字マッチングセレクタ

<div id="article">1</div>
<div id="subarticle">2</div>
<div id="article1">3</div>
<style>
[id$=article] {
     color:red;
}
</style>

1.2擬似クラスセレクタ

first-line擬似クラスセレクタ

first-letter擬似クラスセレクタ

rootセレクタ

notセレクタ

emptyセレクタ

targetセレクタ

beforeとafterは、一般的にフローティングをクリアし、親要素に設定するために使用できます.

.parent:before {
      content:"";
      display: block;
      height: 0;
      clear: both;
      visibility: hidden;
}
* html .parent{zoom:1;} /* IE6 */
*+html .parent{zoom:1;} /* IE7 */

2.影

box-shadow:3px 4px 2px #000;
-webkit-box-shadow:3px 4px 2px #000;
-moz-box-shadow:3px 4px 2px #000;

/*text-shadow            */
text-shadow: 5px -10px 5px red;

3.背景
4.フィレットボーダー

<span style="font-size:14px;">border-radius：5px;
-webkit-border-radius：5px;
-moz-border-radius：5px;</span>