テキストに付ける影を設定する。値には影効果指定する。 影効果は3つの長さと、色を指定する。
div.shadow {text-shadow: yellow 2px 3px 4px;}
は，元の文字の右に2px, 下に3px，ぼかし範囲4pxの影がつく。 影効果はカンマで区切って複数指定できる。上記の指定の例を 以下に示す。
white 2px 3px 4px の段落
ボックスに以下の追加装飾を施すことができる。
順に説明する。
ボーダーの四隅の丸め具合を半径で指定する。半径の値を2個指定した 場合はそれぞれ横方向，縦方向の半径指定と見なされる。
div.round {border: 3px double navy; border-radius: 3em 2em;}
と設定した枠の例を以下に示す。
丸め枠
半径を指定にはパーセント値も使える。枠全体の大きさからの比率となる。 これを利用すると，半径に50%を指定することで丸枠が書ける。
div.maru {
border: 3px solid navy; border-radius: 50%; width: 5em; height: 5em;
text-align: center; background: #922; color: #bb3;}
div.maru p { text-align: center; color: #dd3; padding-top: 1.5em;}
と設定したdivを以下に示す。
六魂祭!
ボーダーの四隅を個別に指定することもできる。その場合はそれぞれ， border-top-left-radius, border-top-right-radius, border-bottom-left-radius, border-bottom-right-radius を特性として指定する。右側だけ角を丸める例を示す。
div.migimaru {
background: #4a4; box-shadow: #444 1px 1px 2px; padding: 0 0.5ex;
border-top-right-radius: 2ex;
border-bottom-right-radius: 2ex;
}
詳細はWebへ!
ボックスに影を落とす。影の指定は色と， 2個から4個の長さを指定する。長さ指定の1個目は右方向へのずらし， 2個目は下方向へのずらし，3個目はぼかし，4個目は拡散範囲を意味する。
div.boxshadow {box-shadow: green 2px 3px 4px 5px; background: #dda}
とした場合の例を示す。
値にキーワード inset を指定すると，くぼんだ感じになる。
div.insetboxshadow {
box-shadow: inset green 2px 3px 4px 5px; background: #dda
padding: 1ex;
}
としたボックスを以下に示す(borderの内側に影がつくので一定の padding を取っておくとよい)。
要素を表示する場合の透明度を指定できる。
要素の内容物を表示する場合の不透明度を0から1までの実数値で指定する。 0.0が完全透明，1.0が完全不透明である。
なまはげさん(opacity: 1.0)
なまはげさん(opacity: 0.7)
なまはげさん(opacity: 0.5)
なまはげさん(opacity: 0.2)
上の背景画像つきの要素には，5つのp要素の opacity をそれぞれ， 1.0, 0.7, 0.5, 0.2 に設定したものを列挙している。
背景画像を透かして見せつつ，文字そのものを不透明にしたい場合は 背景画像を張るブロックレベル要素のopacityを下げ、それと同じ大きさの ブロックレベル要素を position: absolute; で同じ位置に重ね、 その中に文章を入れる。
薄いなまはげさんの上の文章
背景色にrgba表記を使うと背景色を透明化できる。
たとえば、background: rgba(240, 240, 200, 0.3); とすると、透けるオレンジの背景色が得られる。