CSS3.0の各種修飾 - 文字に影を追加する
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SJIS" /> <title> 影を追加する </title> <style type="text/css"> span{ display: block; padding: 8px; font-size:xx-large; } </style> </head> <body> text-shadow:red 5px 5px 2px: <span style="text-shadow:red 5px 5px 2px">テスト文字列</span> text-shadow:5px 5px 2px(影色省略): <span style="text-shadow:5px 5px 2px;color:blue;">テスト文字列</span> text-shadow:-5px -5px 2px gray(左上影): <span style="text-shadow:-5px -5px 2px gray">テスト文字列</span> text-shadow:-5px 5px 2px gray(左下影): <span style="text-shadow:-5px 5px 2px gray">テスト文字列</span> text-shadow:5px -5px 2px gray(右上影): <span style="text-shadow:5px -5px 2px gray">テスト文字列</span> text-shadow:5px 5px 2px gray(右下影): <span style="text-shadow:5px 5px 2px gray">テスト文字列</span> text-shadow:15px 15px 2px gray(右下影、偏差距離大): <span style="text-shadow:15px 15px 2px gray">テスト文字列</span> text-shadow:5px 5px 10px gray(薄く???): <span style="text-shadow:5px 5px 10px gray">テスト文字列</span> </body> </html>
複数の影を追加する
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SJIS" /> <title> 複数影を追加する </title> <style type="text/css"> span{ display: block; padding: 8px; font-size:xx-large; } </style> </head> <body> text-shadow:5px 5px 2px #222,<br/> 30px 30px 2px #555 ,<br/> 50px 50px 2px #888(複数影): <span style="text-shadow:5px 5px 2px #222,30px 30px 2px #555 ,50px 50px 2px #888">テスト文字列</span> </body> </html>