liguofeng29’s blog

個人勉強用ブログだっす。

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>

f:id:liguofeng29:20160129213946p:plain

複数の影を追加する

<!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>

f:id:liguofeng29:20160129214007p:plain