@ CSS

box-shadow プロパティ

box-shadow は要素にドロップシャドウ効果を与えるプロパティです。

format

box-shadow: offset-x offset-y blur-radius spread-radius color inset;

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

  • offset-x:水平方向の距離
  • offset-y:垂直方向の距離
  • blur-radius:影のぼかし半径(オプション)
  • spread-radius:影の拡張半径(オプション)
  • color:影の色(オプション)
  • inset:外側の影から内側の影に変更(オプション)

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

property_box_shadow

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

<head>
<meta charset="utf-8">
<title>sample</title>
<link rel="stylesheet" href="style.css">
<style>
.box-shadow {
  width: 300px;
  height: 200px;
  border: 1px solid #555;
  box-shadow: 5px 5px 5px rgba(0,0,0,0.4);
} 
</style>
</head>

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

</html>

demo