text-shadow、word-wrapを弄ってみる。

CSS3のチュートリアル会みたいなのをやっているので、
そこで出たものまとめ。

ちな、教材はCSS3 Text Effects

text-shadow

div
{
  text-shadow:5px 5px 5px #FF0000;
}

こんなやつ。

• 単位(px,em)は省略出来ない。

  text-shadow:5 5 5 #FF0000;

などとは出来ない。

  text-shadow:0px 0px 0px #FF0000;

という解釈にもならない。
タダのエラー。

• 値の説明

前から順に、

横位置 縦位置 ぼかし 色

横位置、縦位置はマイナスも可能

ぼかしは省略可能。マイナスは不可能。

省略すると

  text-shadow:5px 5px 0px #FF0000;

という解釈

色はrgbaも利用可。
だのでアルファも掛けられる。

同じ要素に二重でtext-shadowはかけられない。
上書きされる。

どうしてもやりたいならば、別の要素を用意して、位置を調整して重ねたりしてやる方法か?

word-wrap

p.wrap
{
  background-color:#00FF00;
  width:11em;
  border:1px solid #000000;
  word-wrap:break-word;//ここ
}

11emで生成された枠のなかに、自動で折り返しされて文章が並ぶ。
値は、break-wordとnormal。

以上