Firefox3.5のCSS新機能

text-shadow

Safari4でも対応してます。

※引数のルールが2種類あって、こんな感じだそうです。
[ <color>? <offset-x> <offset-y> <blur-radius>? | <offset-x> <offset-y> <blur-radius>? <color>? ]


1種類目の引数の例
<span style="text-shadow : blue 2px 2px; color:yellow; font-size:150%;">青い影が付いた黄色の文字</span>
青い影が付いた黄色の文字

text-shadow : blue 2px 2px; は
青色で、offset-xに2px、offset-yに2pxの位置に、1pxのぼかしを入れて、影を表示するという意味。


2種類目の引数の例
複数の影を付けることもできるようです。
<span style="text-shadow: 2px 2px 2px blue, -2px -2px 2px green, 0px 0px 20px yellow; color:white; font-size:150%;">白色の文字で、右下に青、左上に緑、周囲に黄色い影</span>
白色の文字で、右下に青、左上に緑、周囲に黄色い影

text-shadow: 2px 2px 2px blue, -2px -2px 2px green, 0px 0px 20px yellow;
offset-x, offset-y, blur-radius, colorの順で引数を指定し、3つの影を設定。


詳しくはこちらをどうぞ
https://developer.mozilla.org/en/CSS/text-shadow

word-wrap:break-word;

右端に来たら、単語の途中でも折り返しをする。


<div style="width:150px; word-wrap:break-word; background-color:#e0e090;">
  ABCDEFGHIJKLMNOPQRSTUVWXYZ
  ABCDEFGHIJKLMNOPQRSTUVWXYZ
</div>

---

word-wrap:normal;

通常（normal）は、単語の途中では折り返しはしない。


<div style="width:150px; word-wrap:normal; background-color:#e0e090;">
  ABCDEFGHIJKLMNOPQRSTUVWXYZ
  ABCDEFGHIJKLMNOPQRSTUVWXYZ
</div>

white-space:pre-line;

pre-lineを使用すると、適当な場所（空白の後）で改行をする。
また、空白の連続は無視する。


white-space:pre;

スタンダードなpreは、改行しない。
また、空白の連続があればその分スペースを入れる。


white-space:pre-wrap;

pre-wrap(Firefox3.0から追加)も、改行はする。
また、空白の連続があればその分スペースを入れる。

あまり良い用途が浮かばなかったので検索していたら、こんなページを見つけました。

before,after疑似要素を使ってCSSだけで角丸を実現する
http://blog.nyarla.net/2006/11/20/1