@ CSS

text-shadow プロパティ

text-shadow は要素のテキストに影効果を指定するプロパティです。

format

text-shadow: offset-x offset-y blur-radius color;

text-shadow プロパティの parameta は下記のとおりです。

  • offset-x:水平方向の距離
  • offset-y:垂直方向の距離
  • blur-radius:影のぼかし半径(オプション)
  • color:影の色(オプション)

カンマで区切って複数の影を指定する事もできます。

example

text-shadow: 5px 5px 5px rgba(0, 0, 255, 0.5) , -5px -5px 1px rgba(255, 0, 0, 0.5);

text-shadow プロパティの使用例を以下に示します。

property_text_shadow

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="utf-8">
<title>sample</title>
<style>
.text-shadow {
  font-size: 250%;
  text-shadow: 5px 5px 5px rgba(0,0,0,0.4);
}
</style>
</head>

<body>
  <div class="text-shadow">text-shadow</div> 
</body>

</html>

demo